/* Category hue identifies a computed group, section, testament, or book family.
   Bar length alone carries magnitude; every bar is labeled and repeated in a table. */
:root{--words-hue:#2669fc}
html[data-theme="dark"]{--words-hue:#4363af}


.words-figure{margin:22px 0 26px;padding:20px 20px 12px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(145deg,var(--card),var(--card-2));box-shadow:var(--shadow-soft)}
.words-figure>figcaption{margin:14px 0 4px;font-size:14px;line-height:1.65;color:var(--ink-2)}

/* the panels: three across for the seven-panel figures, two for the testaments */
.words-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.words-grid-testament{grid-template-columns:repeat(2,minmax(0,1fr))}
.words-grid-computed .words-panel:last-child{grid-column:2}
.words-grid-section .words-panel:last-child{grid-column:2}
.words-panel{min-width:0;padding:14px 16px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
.words-panel-heading{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start;margin:0 0 13px}
.words-panel-icon{display:grid;place-items:center;width:34px;height:34px;margin-top:1px;border:1px solid color-mix(in srgb,var(--words-panel-hue,var(--accent)) 34%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--words-panel-hue,var(--accent)) 9%,var(--card));color:var(--words-panel-hue,var(--accent))}
.words-panel-icon svg{display:block;width:22px;height:22px}
.words-panel-kicker{margin:0 0 3px;color:var(--accent);font:650 10px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.words-panel-title{margin:0 0 10px;font:600 15px/1.35 var(--sans);color:var(--ink)}
.words-panel-heading .words-panel-title{margin:0 0 3px;font:500 19px/1.18 var(--serif);text-wrap:balance}
.words-panel-sub{display:block;margin-top:2px;font:400 12.5px/1.4 var(--sans);color:var(--ink-3)}
.words-panel-heading .words-panel-sub{margin:0;font-size:12px;line-height:1.45}

/* the bar list: word, bar with its z-score at the tip, count in the grouping */
.words-list{list-style:none;margin:0;padding:0}
.words-list li{display:grid;grid-template-columns:minmax(72px,34%) minmax(0,1fr) 46px;align-items:center;gap:8px;padding:2px 0;font-size:13px;line-height:1.3}
.words-word{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.words-bar{display:block;overflow:visible;height:14px}
.words-fill{fill:var(--words-panel-hue,var(--words-hue))}
.words-hue-g-1{--words-panel-hue:var(--map-g-1)}.words-hue-g-2{--words-panel-hue:var(--map-g-2)}.words-hue-g-3{--words-panel-hue:var(--map-g-3)}.words-hue-g-4{--words-panel-hue:var(--map-g-4)}.words-hue-g-5{--words-panel-hue:var(--map-g-5)}.words-hue-g-6{--words-panel-hue:var(--map-g-6)}.words-hue-g-7{--words-panel-hue:var(--map-g-7)}
.words-hue-s-law{--words-panel-hue:var(--map-s-law)}.words-hue-s-history{--words-panel-hue:var(--map-s-history)}.words-hue-s-poetry{--words-panel-hue:var(--map-s-poetry)}.words-hue-s-prophets{--words-panel-hue:var(--map-s-prophets)}.words-hue-s-gospels{--words-panel-hue:var(--map-s-gospels)}.words-hue-s-letters{--words-panel-hue:var(--map-s-letters)}.words-hue-s-revelation{--words-panel-hue:var(--map-s-revelation)}
.words-hue-ot{--words-panel-hue:var(--map-ot)}.words-hue-nt{--words-panel-hue:var(--map-nt)}
.words-composition{margin:-2px 0 12px}.words-composition p{margin:0 0 5px;color:var(--ink-3);font:500 10px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase}.words-composition-strip{display:flex;gap:2px;height:7px;overflow:hidden;border-radius:999px;background:var(--line)}.words-composition-segment{flex:var(--words-share) 0 0;min-width:2px;background:var(--words-panel-hue)}
.words-z{fill:var(--ink-3);font:500 10.5px var(--sans);font-variant-numeric:tabular-nums}
.words-count{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* each list's table, behind a light disclosure */
.words-data{margin:10px 0 0;border-top:1px solid var(--line);padding-top:8px}
.words-data>summary{cursor:pointer;font:500 12.5px/1.4 var(--sans);color:var(--ink-2)}
.words-data>summary:hover{color:var(--accent)}
.words-data[open]>summary{margin-bottom:8px}
.words-table{font-size:12.5px}
.words-table td:nth-child(n+3){font-variant-numeric:tabular-nums;text-align:right}
.words-table th:nth-child(n+3){text-align:right}
.words-rank{color:var(--ink-3)}

/* the book view: a picker of 66 links, then one disclosure per book */
.words-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:0 0 18px}
.words-picker-label{margin:0 0 6px;color:var(--accent);font:600 11px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.words-picker-list{list-style:none;margin:0;padding:0;columns:3;column-gap:16px;font-size:13px;line-height:1.7}
.words-picker-list li{break-inside:avoid;margin:0;padding:0}
.words-book .words-panel>.words-panel-sub{margin:0 0 8px}
.words-picker-list a{color:var(--ink-2);text-decoration:none}
.words-picker-list a:hover{color:var(--accent);text-decoration:underline}
.words-books{display:grid;gap:8px}
.words-book{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:0 14px;scroll-margin-top:90px}
.words-book>summary{cursor:pointer;padding:10px 0;font:600 15px/1.35 var(--sans);color:var(--ink)}
.words-book>summary:hover{color:var(--accent)}
.words-book>summary .words-panel-sub{display:inline;margin-left:8px}
.words-book .words-panel{border:0;padding:0 0 12px;background:transparent}
.words-book .words-panel-title{margin-bottom:8px}
/* a book panel spans the page, so its word column is capped and its bar
   track is capped too, rather than stretching a 20-row list across 1,000 px */
.words-book .words-list{max-width:640px}
.words-book .words-list li{grid-template-columns:minmax(96px,170px) minmax(0,1fr) 52px}

@media (max-width:900px){
  .words-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .words-grid-computed .words-panel:last-child{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}
  .words-grid-section .words-panel:last-child{grid-column:1/-1;width:calc(50% - 8px);justify-self:center}
  .words-picker-list{columns:2}
}
@media (max-width:600px){
  .words-figure{padding:12px 12px 8px}
  .words-grid,.words-grid-testament{grid-template-columns:1fr}
  .words-grid-computed .words-panel:last-child{grid-column:auto;width:auto;justify-self:stretch}
  .words-grid-section .words-panel:last-child{grid-column:auto;width:auto;justify-self:stretch}
  .words-picker{grid-template-columns:1fr}
  .words-list li,.words-book .words-list li{grid-template-columns:minmax(64px,36%) minmax(0,1fr) 44px;gap:6px}
}