/* How hard is the Bible to read? (docs/readability-plan.md)
 * Colors: the map of meaning's validated seven (tools/lib/semantic-map-palette.mjs).
 * Blue marks the Flesch-Kincaid grade, amber the second reading (Coleman-Liau,
 * or the clause count); sections keep their map colors. Every value is also
 * printed and repeated in a table. */
:root{--rl-blue:#2669fc;--rl-amber:#a4750d;--rl-s-law:#2669fc;--rl-s-history:#269ec5;--rl-s-poetry:#5eb05e;--rl-s-prophets:#a343c0;--rl-s-gospels:#a4750d;--rl-s-letters:#c5055c;--rl-s-revelation:#813c0b;--rl-grid:#ece6da}
html[data-theme="dark"]{--rl-blue:#4363af;--rl-amber:#ab9016;--rl-s-law:#4363af;--rl-s-history:#2ca1c2;--rl-s-poetry:#1a7f55;--rl-s-prophets:#a25ef3;--rl-s-gospels:#ab9016;--rl-s-letters:#ee2b75;--rl-s-revelation:#b64a01;--rl-grid:#2f2b22}

/* Editorial finish matching the site's long-form research guides. */
.reading-level .research-hero .page-art{
  border:1px solid color-mix(in srgb,var(--line-2) 76%,transparent);
  box-shadow:0 18px 46px color-mix(in srgb,var(--ink) 8%,transparent)
}
.reading-level .scope-panel{
  grid-template-columns:142px minmax(0,1fr);
  gap:30px;
  margin:2px 0 24px;
  padding:24px 26px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--card) 86%,transparent),var(--card-2))
}
.reading-level .scope-panel h2{padding-top:3px}
.reading-level .research-nav{gap:8px 10px;padding:14px 0;margin-bottom:40px}
.reading-level .research-nav a{padding:6px 10px;border-radius:999px}
.reading-level .research-nav a:hover,
.reading-level .research-nav a[aria-current="location"]{background:var(--card-2);text-decoration:none}
.reading-level .rl-answer{gap:16px;margin-top:2px}
.reading-level .rl-answer div{
  position:relative;
  min-height:126px;
  padding:22px 22px 20px;
  overflow:hidden;
  border-color:var(--line);
  border-radius:10px;
  background:linear-gradient(150deg,var(--card) 42%,var(--card-2))
}
.reading-level .rl-answer div::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--accent)
}
.reading-level .rl-answer b{font-family:var(--serif);font-size:40px;font-weight:400;letter-spacing:-.025em}
.reading-level .rl-answer span{margin-top:10px;line-height:1.55}
.reading-level .rl-figure{
  padding:24px 24px 18px;
  border-radius:10px;
  background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card-2) 72%,var(--card)))
}
.reading-level :is(.rl-mini,.rl-readout){box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 3%,transparent)}
.reading-level :is(.rl-controls,.rl-filter){padding:16px 18px;border:1px solid var(--line);border-radius:9px;background:var(--card-2)}
.reading-level :is(.rl-controls select,.rl-filter input){min-height:42px;background:var(--card)}
.reading-level .research-disclosure{padding:20px 22px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--card) 70%,transparent)}
.reading-level .research-disclosure>summary{list-style-position:outside;margin-left:20px}

@media (max-width:600px){
  .reading-level .scope-panel{grid-template-columns:1fr;gap:8px;padding:20px 18px}
  .reading-level .research-nav{gap:6px 4px}
  .reading-level .research-nav a{padding:5px 8px}
  .reading-level .rl-answer div{min-height:0;padding:18px 20px}
  .reading-level .rl-answer b{font-size:35px}
  .reading-level .rl-figure{padding:18px 14px 14px}
  .reading-level .research-disclosure{padding:18px 16px}
}

/* Keep the finishing layer above the earlier chart-layout declarations. */
.reading-level.reading-level .scope-panel{grid-template-columns:142px minmax(0,1fr);gap:30px;margin:2px 0 24px;padding:24px 26px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 86%,transparent),var(--card-2))}
.reading-level.reading-level .scope-panel h2{padding-top:3px}
.reading-level.reading-level .rl-answer{gap:16px;margin-top:2px}
.reading-level.reading-level .rl-answer div{min-height:126px;padding:22px 22px 20px;border-color:var(--line);border-radius:10px;background:linear-gradient(150deg,var(--card) 42%,var(--card-2))}
.reading-level.reading-level .rl-answer b{font-family:var(--serif);font-size:40px;font-weight:400;letter-spacing:-.025em}
.reading-level.reading-level .rl-answer span{margin-top:10px;line-height:1.55}
.reading-level.reading-level .rl-figure{padding:24px 24px 18px;border-radius:10px;background:linear-gradient(145deg,var(--card),color-mix(in srgb,var(--card-2) 72%,var(--card)))}
@media (max-width:600px){
  .reading-level.reading-level .scope-panel{grid-template-columns:1fr;gap:8px;padding:20px 18px}
  .reading-level.reading-level .rl-answer div{min-height:0;padding:18px 20px}
  .reading-level.reading-level .rl-answer b{font-size:35px}
  .reading-level.reading-level .rl-figure{padding:18px 14px 14px}
  .reading-level.reading-level .rl-controls label{display:grid;grid-template-columns:1fr;gap:6px;width:100%}
  .reading-level.reading-level .rl-controls select{width:100%;min-width:0}
}

.reading-level .research-section-body{min-width:0}
.reading-level .scope-panel{display:grid;grid-template-columns:130px minmax(0,1fr);gap:26px;margin:0 0 20px;padding:22px 0;border-block:1px solid var(--line)}
.reading-level .scope-panel h2{font:500 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0}
.reading-level .scope-panel p{margin:0;color:var(--ink-2);line-height:1.75}
.reading-level .scope-panel p+p{margin-top:10px}
.reading-level .research-section h3{font:400 24px/1.3 var(--serif);margin:30px 0 14px}
.method-note{padding:18px 20px;border-left:3px solid var(--accent);background:var(--card-2);color:var(--ink-2);font-size:14px;line-height:1.75;margin:16px 0 22px}
.method-note p{margin:0}.reading-level .method-note p+p{margin-top:10px}
.reading-level .method-note p{margin-bottom:0}
details.faq{border-bottom:1px solid var(--line);padding:18px 0;margin:0}
details.faq summary{cursor:pointer;font:400 21px/1.35 var(--serif);color:var(--ink)}
details.faq summary:hover{color:var(--accent)}
details.faq .body{padding-top:10px}
details.faq .body p{font-size:14.5px;margin-bottom:8px;line-height:1.7}
.sources{font-size:13px;color:var(--ink-2);padding-left:22px;margin:8px 0}
.sources li{padding:4px 0;line-height:1.6;scroll-margin-top:90px}
.sources li:target{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:6px}
.sources a{word-break:break-word}

/* the answer tiles */
.rl-answer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 26px}
.rl-answer div{padding:16px 18px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.rl-answer b{display:block;font:600 34px/1.1 var(--sans);color:var(--ink)}
.rl-answer span{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* figures */
.rl-figure{margin:22px 0 26px;padding:20px 20px 14px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(145deg,var(--card),var(--card-2))}
.rl-figure-title{margin:0 0 10px;font:600 15px/1.4 var(--sans);color:var(--ink)}
.rl-note{margin:10px 0 0 !important;font-size:13px !important;line-height:1.6 !important;color:var(--ink-3) !important}
.rl-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 12px;font-size:12.5px;color:var(--ink-2)}
.rl-legend span{display:inline-flex;align-items:center;gap:7px}
.rl-key{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--rl-blue);flex:none}
.rl-key-cli,.rl-key-clause{background:var(--rl-amber)}
.rl-rows{list-style:none;margin:0;padding:0}
.rl-rows li{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 92px;align-items:center;gap:12px;padding:5px 0;border-bottom:1px solid var(--line)}
.rl-rows li:last-child{border-bottom:0}
.rl-row-label b{display:block;font:600 14px/1.3 var(--sans);color:var(--ink)}
.rl-row-label small{display:block;font-size:12px;line-height:1.35;color:var(--ink-3)}
.rl-row-value{text-align:right;font:500 13px var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.rl-track{display:block;overflow:visible}
.rl-grid{stroke:var(--rl-grid);stroke-width:1}
.rl-link{stroke:var(--line-2);stroke-width:2}
.rl-dot{stroke:var(--card);stroke-width:2}
.rl-dot-fk{fill:var(--rl-blue)}
.rl-dot-cli,.rl-dot-clause{fill:var(--rl-amber)}
.rl-axis{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 92px;gap:12px;margin-top:4px;font-size:11.5px;color:var(--ink-3)}
.rl-axis-label{grid-column:3;grid-row:1;text-align:right}
.rl-axis-ticks{grid-column:2;grid-row:1;position:relative;height:16px}
.rl-axis-ticks span{position:absolute;transform:translateX(-50%);font-variant-numeric:tabular-nums}

/* small multiples and bar lists */
.rl-minis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rl-mini{min-width:0;padding:12px 14px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.rl-mini h4{margin:0;font:600 14px/1.35 var(--sans);color:var(--ink)}
.rl-mini p{margin:2px 0 10px !important;font-size:12px !important;line-height:1.45 !important;color:var(--ink-3) !important}
.rl-mini ol{list-style:none;margin:0;padding:0}
.rl-mini li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;align-items:center;padding:2px 0;font-size:12.5px}
.rl-mini-label{font-weight:600;color:var(--ink-2)}
.rl-mini-bar{display:block;overflow:visible;height:16px}
.rl-fill{fill:var(--rl-blue)}
.rl-tip{fill:var(--ink-3);font:500 11px var(--sans);font-variant-numeric:tabular-nums}
.rl-s-law{fill:var(--rl-s-law);background:var(--rl-s-law)}.rl-s-history{fill:var(--rl-s-history);background:var(--rl-s-history)}.rl-s-poetry{fill:var(--rl-s-poetry);background:var(--rl-s-poetry)}.rl-s-prophets{fill:var(--rl-s-prophets);background:var(--rl-s-prophets)}.rl-s-gospels{fill:var(--rl-s-gospels);background:var(--rl-s-gospels)}.rl-s-letters{fill:var(--rl-s-letters);background:var(--rl-s-letters)}.rl-s-revelation{fill:var(--rl-s-revelation);background:var(--rl-s-revelation)}

/* every book */
.rl-controls{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.rl-controls label{display:inline-flex;align-items:center;gap:8px}
.rl-controls select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:6px;padding:5px 8px;max-width:100%}
.rl-books{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rl-book-group h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:600 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.rl-book-group ol,.rl-books-flat{list-style:none;margin:0;padding:0}
.rl-book-group li,.rl-books-flat li{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr);gap:10px;align-items:center;padding:1px 0;font-size:13px}
.rl-books .rl-axis,.rl-figure > .rl-axis.rl-axis-books{grid-template-columns:minmax(110px,170px) minmax(0,1fr) 0}
.rl-book-name{color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-book-name:hover{color:var(--accent);text-decoration:underline}
.rl-axis-books .rl-axis-label{grid-column:2;text-align:right;margin-top:16px}

/* chapter explorer */
.rl-explorer[hidden]{display:none}
.rl-chart{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;margin-top:8px}
.rl-yaxis{position:relative;height:220px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rl-yaxis span{position:absolute;right:0;transform:translateY(50%)}
.rl-plot{position:relative;height:220px;border-bottom:1px solid var(--line-2)}
.rl-plot-grid{position:absolute;left:0;right:0;height:1px;background:var(--rl-grid)}
.rl-ref{position:absolute;left:0;right:0;border-top:1px solid var(--ink-3);pointer-events:none}
.rl-ref span{position:absolute;right:0;top:-18px;font-size:11px;color:var(--ink-2);background:color-mix(in srgb,var(--card) 85%,transparent);padding:0 4px}
.rl-cols{position:absolute;inset:0;display:flex;align-items:flex-end;gap:2px}
.rl-col{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:flex-end;padding:0;margin:0;border:0;background:none;cursor:pointer}
.rl-col i{display:block;width:100%;max-width:24px;margin:0 auto;border-radius:4px 4px 0 0;background:var(--rl-col,var(--rl-blue))}
.rl-col.is-short i{opacity:.35}
.rl-col:hover i,.rl-col:focus-visible i{opacity:1;filter:brightness(.8)}
.rl-col.is-on i{background:var(--ink);opacity:1}
.rl-col:focus-visible{outline:none}
.rl-xaxis{position:relative;height:16px;margin:4px 0 0 42px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rl-xaxis span{position:absolute;transform:translateX(-50%)}
.rl-readout{min-height:48px;margin:12px 0 0;padding:10px 14px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.rl-readout b{color:var(--ink)}

/* extremes */
.rl-extremes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:10px 0 24px}
.rl-extremes h4{margin:0 0 8px;font:600 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.rl-extremes ol{margin:0;padding-left:22px}
.rl-extremes li{padding:5px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.4}
.rl-extremes li a{font-weight:600;color:var(--ink)}
.rl-extreme-grade{float:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.rl-extreme-sub{display:block;font-size:12px;color:var(--ink-3)}

/* tables */
.rl-heat,.rl-table{width:100%;border-collapse:collapse;font-size:13.5px}
.rl-heat caption,.rl-table caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:13px;line-height:1.55;color:var(--ink-3)}
.rl-heat th,.rl-heat td,.rl-table th,.rl-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.rl-heat th:first-child,.rl-table th:first-child{text-align:left;font-weight:600;white-space:nowrap}
.rl-heat thead th,.rl-table thead th{background:var(--card-2);font-weight:600;color:var(--ink-2)}
.rl-heat td{background:color-mix(in srgb,var(--rl-blue) var(--rl-shade,0%),var(--card));color:var(--ink)}
html[data-theme="dark"] .rl-heat td{background:color-mix(in srgb,var(--rl-blue) var(--rl-shade,0%),var(--card))}
.rl-heat abbr,.rl-table abbr{text-decoration:none}
.rl-table .rl-short th,.rl-table .rl-short td{color:var(--ink-3)}
.rl-data .research-table-wrap{max-height:560px;overflow:auto}
.rl-data thead th{position:sticky;top:0;z-index:1}
.rl-filter{margin:0 0 12px !important;font-size:13px}
.rl-filter input{font:inherit;margin-left:8px;padding:6px 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--card);color:var(--ink);min-width:220px}

@media (max-width:900px){
  .rl-minis{grid-template-columns:1fr}
  .rl-answer{grid-template-columns:1fr}
}
@media (max-width:600px){
  .reading-level .scope-panel{grid-template-columns:1fr;gap:8px}
  .rl-figure{padding:14px 12px 10px}
  .rl-rows li,.rl-axis{grid-template-columns:minmax(0,1fr) 64px;gap:4px 8px}
  .rl-rows li .rl-row-label{grid-column:1/-1}
  .rl-rows li .rl-track{grid-column:1}
  .rl-rows li .rl-row-value{grid-column:2;grid-row:2}
  .rl-axis .rl-axis-ticks{grid-column:1}
  .rl-axis .rl-axis-label{grid-column:1;grid-row:2;text-align:left}
  .rl-book-group li,.rl-books-flat li{grid-template-columns:96px minmax(0,1fr)}
  .rl-books .rl-axis,.rl-figure > .rl-axis.rl-axis-books{grid-template-columns:96px minmax(0,1fr) 0}
  .rl-extremes{grid-template-columns:1fr}
  .rl-yaxis,.rl-plot{height:180px}
  .rl-filter input{min-width:0;width:100%;margin:6px 0 0}
}