/* Bilingual 4‑Pane Reader (Basic) 2026 — vA
   Layout: ToC | French | English | Notes
*/
:root{
  --bg: #fffff8;
  --ink: #111;
  --muted: #666;
  --rule: #ddd;
  --link: #0b63c7;
  --pane-pad: 14px;
  --header-pad: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

html, body{
  height:100%;
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

.reader{
  height:100%;
  display:flex;
  flex-direction:column;
}

.topbar{
  border-bottom:1px solid var(--rule);
  padding: 8px 12px;
  display:flex;
  align-items:center;
  gap:14px;
}

.topbar .title{
  font-weight:600;
}

.topbar label{
  font-size: 14px;
  color: var(--muted);
  user-select:none;
}

.panes{
  flex:1;
  display:grid;
  grid-template-columns: 18% 32% 32% 18%;
  gap:0;
  min-height:0; /* important for nested scroll */
}

.pane{
  min-width:0;
  border-right:1px solid var(--rule);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.pane:last-child{
  border-right:none;
}

.pane-header{
  padding: var(--header-pad) var(--pane-pad);
  border-bottom:1px solid var(--rule);
  font-size:14px;
  color: var(--muted);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.pane-body{
  padding: var(--pane-pad);
  overflow:auto;
  min-height:0;
  scroll-behavior:smooth;
}

/* Basic typography */
.pane-body h2, .pane-body h3, .pane-body h4{
  margin: 0.8em 0 0.4em 0;
  line-height:1.25;
}
.pane-body p{
  margin: 0.55em 0;
  line-height:1.45;
}
.pane-body hr{
  border: none;
  border-top:1px solid var(--rule);
  margin: 1.2em 0;
}

/* Links */
.pane-body a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Page numbers */
.pane-body .pn{
  font-weight:700;
}
.pane-body p.flush-left{
  margin: 0.3em 0 0.6em 0;
}
.pane-body p.flush-left{
  cursor:pointer;
}
.pane-body p.flush-left:hover .pn{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footnotes */
.pane-body p.footnote{
  font-size: 0.95em;
  color:#222;
}
.pane-body p.footnote a{
  font-weight:600;
}
.pane-body .note-highlight{
  outline: 2px solid rgba(11,99,199,0.25);
  border-radius: 6px;
  padding: 4px 6px;
  margin-left:-6px;
  margin-right:-6px;
}

/* ToC styling */
#toc-pane .pane-body ul.toc{
  list-style:none;
  padding-left:0;
  margin:0.5em 0 0 0;
}
#toc-pane .pane-body ul.toc li{
  margin: 0.4em 0;
}
#toc-pane .pane-body a.toc-link{
  text-decoration:none;
}
#toc-pane .pane-body a.toc-link:hover{
  text-decoration:underline;
}

/* Small helper */
.small-muted{ color: var(--muted); font-size: 12px; }


/* --- Permalinks (paragraph-level) --- */
.pane-body [data-has-permalink="1"]{
  position: relative;
}
.pane-body a.permalink{
  position: absolute;
  left: -1.2em;
  top: 0.05em;
  opacity: 0;
  text-decoration: none;
  font-size: 0.85em;
  line-height: 1;
  padding: 0 0.1em;
}
.pane-body [data-has-permalink="1"]:hover > a.permalink{
  opacity: 0.55;
}
.pane-body a.permalink:focus{
  opacity: 0.9;
  outline: none;
}

/* ==========================================================
   Landing page helpers (kept in the same single CSS file)
   ========================================================== */
.landing{
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.landing h1{
  margin: 18px 0 6px;
  font-size: 28px;
}

.landing .subtitle{
  margin: 0 0 18px;
  color: var(--muted);
}

.card{
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #fff;
  padding: 16px 18px;
  margin: 16px 0;
}

.btn{
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}

.btn:hover{
  text-decoration: none;
}

.topbar a{
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.topbar a:hover{
  border-bottom-style: solid;
}


/* Hide embedded TOC source inside text panes */
#fr-pane #toc-main,
#en-pane #toc-main{ display: none; }


/* --- Justified text (main + notes) --- */
#fr-pane .pane-body,
#en-pane .pane-body,
#notes-pane .pane-body{
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
}

/* Keep headings ragged-right */
#fr-pane h1, #fr-pane h2, #fr-pane h3, #fr-pane h4,
#en-pane h1, #en-pane h2, #en-pane h3, #en-pane h4,
#notes-pane h1, #notes-pane h2, #notes-pane h3, #notes-pane h4{
  text-align: left;
  hyphens: none;
}

/* Hide inline endnotes blocks inside the text panes (we show them in Notes pane) */
#fr-pane div[type="endnotes"],
#en-pane div[type="endnotes"]{
  display: none;
}