html[data-design] .graphics-toolbar{display:flex;gap:8px;padding:6px 12px;flex:0 0 auto;border-bottom:1px solid var(--line);font:13px var(--font-ui)}html[data-design] .graphics-toolbar select{min-width:0;width:100%}html[data-design] .graphic-notice{font:13px/1.5 var(--font-ui);color:var(--muted)}
html[data-design] .chapter-map{display:block;width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-height:320px}html[data-design] .map-water{fill:var(--panel)}html[data-design] .map-land{fill:var(--highlight);stroke:var(--muted);stroke-width:.7}html[data-design] .chapter-map circle{fill:var(--accent)}html[data-design] .chapter-map text{fill:var(--accent-ink);font:11px var(--font-ui)}
html[data-design] .map-places{padding-left:25px}html[data-design] .map-places li{margin:12px 0}html[data-design] .map-places small{display:block;font:12px var(--font-ui);color:var(--muted)}html[data-design] .graphic-ref{font:13px var(--font-ui);white-space:normal;text-align:left}
html[data-design] #graphic-filter{display:flex;gap:6px;margin:12px 0}html[data-design] #graphic-query{width:100%;min-width:0}html[data-design] .graphic-timeline{list-style:none;border-left:2px solid var(--accent);padding-left:15px}html[data-design] .graphic-timeline li{padding:12px;border-bottom:1px solid var(--line);position:relative}html[data-design] .graphic-timeline li:before{content:'';position:absolute;left:-20px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--accent)}html[data-design] .graphic-timeline h4{margin:8px 0}html[data-design] .graphic-timeline p{font-size:14px;white-space:pre-wrap}html[data-design] .current-section{background:var(--highlight)}
html[data-design] .graphic-card,html[data-design] .family-tree{border:1px solid var(--line);border-radius:8px;margin:10px 0;padding:12px}html[data-design] .people-results,html[data-design] .family-group{display:flex;flex-wrap:wrap;gap:6px}html[data-design] .person-button{text-align:left;white-space:normal;max-width:100%}html[data-design] .person-button small{display:block;font-size:11px;color:var(--muted)}html[data-design] .family-tree section{border-top:1px solid var(--line);padding:8px 0}

html[data-design] #comment-content .source-caption{font:12px/1.5 var(--font-ui);color:var(--muted);margin:0 0 8px}html[data-design] #comment-content .graphic-notice{font:13px/1.5 var(--font-ui);margin:8px 0}html[data-design] .chapter-map{max-height:240px}

/* Temporary graphics workspace; the base owns the grid, the Bible remains visible. */
html[data-design] .graphics-toolbar{align-items:center}html[data-design] .graphics-toolbar select{flex:1;min-width:0;margin:0;width:auto;font:13px var(--font-ui)}html[data-design] #graphics-expand{flex:0 0 auto;padding:6px 8px;min-height:34px;font:13px var(--font-ui);white-space:nowrap}
html[data-design] #panes:not([data-graphic-mode="comment"]) #pane-comentario .pane-head{height:auto!important;min-height:0}
html[data-design] .map-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;align-items:start}html[data-design] .map-figure{margin:0;min-width:0}html[data-design] .map-places{margin:0;padding-left:28px;min-width:0}html[data-design] .map-places li:first-child{margin-top:0}html[data-design] .map-places li::marker{font:600 16px var(--font-ui);color:var(--accent)}html[data-design] .chapter-map text{font:600 18px var(--font-ui)}html[data-design] .chapter-map circle{stroke:var(--paper);stroke-width:1.5}html[data-design] .map-leader{stroke:var(--accent);stroke-width:1.5}html[data-design] #panes[data-graphics-expanded="true"] .chapter-map{max-height:420px}
html[data-design] .family-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}html[data-design] .family-heading h3{margin:0;font:600 22px/1.4 var(--font-heading)}html[data-design] .family-summary{font:14px/1.6 var(--font-ui);margin:10px 0 16px;color:var(--ink)}html[data-design] .graphic-info{font:13px/1.5 var(--font-ui);color:var(--muted);max-width:38ch}html[data-design] .graphic-info summary{cursor:pointer;list-style:none;font-size:18px;text-align:right;padding:0 4px}html[data-design] .graphic-info summary::-webkit-details-marker{display:none}html[data-design] .graphic-info p{padding:10px;border:1px solid var(--line);background:var(--panel);border-radius:6px}
html[data-design] .family-heading{flex-wrap:wrap}html[data-design] .family-heading .graphic-info[open]{flex-basis:100%;max-width:none}
html[data-design] .family-diagram{display:flex;flex-direction:column;align-items:stretch;gap:20px}html[data-design] .family-tree .family-level{position:relative;border:0;padding:8px 0;text-align:center}html[data-design] .family-level h4{font:13px var(--font-ui);color:var(--muted);margin:0 0 10px}html[data-design] .family-level:not(:last-child)::after{content:'';position:absolute;width:2px;height:20px;left:50%;bottom:-20px;background:var(--accent)}html[data-design] .family-focus{display:inline-block;border:2px solid var(--accent);border-radius:8px;background:var(--highlight);padding:12px 20px;font:600 17px var(--font-ui);max-width:100%;margin-bottom:12px}html[data-design] .family-nodes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}html[data-design] .family-nodes .person-button{flex:1 1 96px;max-width:145px;text-align:center;font:14px/1.4 var(--font-ui);min-width:90px}html[data-design] .family-children .family-nodes{border-top:1px solid var(--line);padding-top:12px}html[data-design] .family-siblings{border-top:1px solid var(--line);margin-top:14px;padding-top:12px;font:14px var(--font-ui)}html[data-design] .family-siblings summary{cursor:pointer;margin-bottom:10px}
html[data-design] #panes[data-graphics-expanded="true"] .family-tree{padding:8px}html[data-design] #panes[data-graphics-expanded="true"] .family-heading h3{font-size:20px}html[data-design] #panes[data-graphics-expanded="true"] .family-summary{font:13px/1.4 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0 6px}html[data-design] #panes[data-graphics-expanded="true"] .family-diagram{gap:8px}html[data-design] #panes[data-graphics-expanded="true"] .family-level{padding:2px 0}html[data-design] #panes[data-graphics-expanded="true"] .family-level h4{font-size:12px;margin-bottom:3px}html[data-design] #panes[data-graphics-expanded="true"] .family-level::after{height:8px;bottom:-8px}html[data-design] #panes[data-graphics-expanded="true"] .family-nodes{gap:4px}html[data-design] #panes[data-graphics-expanded="true"] .family-nodes .person-button{font:13px/1.3 var(--font-ui);padding:5px 8px;min-height:28px}html[data-design] #panes[data-graphics-expanded="true"] .family-parents .person-button small{display:none}html[data-design] #panes[data-graphics-expanded="true"] .family-center{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px}html[data-design] #panes[data-graphics-expanded="true"] .family-center .family-nodes{display:contents}html[data-design] #panes[data-graphics-expanded="true"] .family-center h4{margin:0 4px}html[data-design] #panes[data-graphics-expanded="true"] .family-focus{font-size:16px;padding:4px 10px;margin:0}html[data-design] #panes[data-graphics-expanded="true"] .family-children .family-nodes{padding-top:6px}

/* Keep frequent reading controls outside, group study tools in one small menu. */
html[data-design] #study-tools{position:relative;flex:0 0 auto;z-index:5;font:13px var(--font-ui)}html[data-design] #study-tools>summary{cursor:pointer;list-style:none;border:1px solid var(--control-border);border-radius:6px;background:var(--paper);color:var(--ink);padding:8px 12px;min-height:36px;white-space:nowrap}html[data-design] #study-tools>summary::-webkit-details-marker{display:none}html[data-design] .study-menu-items{position:absolute;right:0;top:calc(100% + 6px);width:min(250px,85vw);padding:6px;background:var(--paper);border:1px solid var(--control-border);border-radius:8px;box-shadow:0 8px 22px #0002;max-height:60vh;overflow:auto}html[data-design] .study-menu-items button,html[data-design] #study-tools #dictionary-from-selection{display:block;width:100%;text-align:left;padding:9px 12px;color:var(--ink);font:14px/1.4 var(--font-ui)}html[data-design] .study-menu-items button:hover{background:var(--panel)}html[data-design] .reading-toolbar:has(#study-tools){column-gap:8px}html[data-design] .reading-toolbar:has(#study-tools)>.reading-actions{flex-wrap:nowrap;gap:4px}