/* Adjacent line reading; whole-hexagram judgments have a separate region. */
.observation-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;margin-bottom:20px;min-width:0}
.observation-layout>.hexagrams{margin-bottom:0}
.observation-layout>.reader{height:auto;min-height:0;max-height:none;padding:18px;overflow:visible;contain:none;scrollbar-gutter:auto;margin:0;border-top:2px solid #b7c0a8;scroll-margin:12px;min-width:0}
.near-reader-head,.judgment-head{display:flex;justify-content:space-between;align-items:start;gap:10px}
.near-reader-head h2,.judgment-head h2{font-size:23px;line-height:1.35;margin:3px 0 9px}
.near-reader-head .eyebrow{font-size:10px;letter-spacing:1px}
.near-reader-head button,.judgment-head button{min-width:44px;min-height:44px;padding:5px;font-size:11px;flex-shrink:0}
.reader-primary .line-structure{font-size:12px;line-height:1.8;margin:3px 0 9px;color:#6f725f}
.reader-primary .line-structure strong{font-weight:500;color:var(--ink)}
.reader-primary .line-role{display:inline-block;padding:2px 7px;border:1px solid #c6ba9c;border-radius:4px;font-size:10px;margin:2px 0}
.reader-primary .original{font-size:24px;line-height:1.85;letter-spacing:.6px;margin:12px 0 10px;overflow-wrap:anywhere}
.reader .source{line-height:1.8;margin:4px 0}.reader .hint{font-size:11px;margin:5px 0;line-height:1.75}
.reader .back-to-line{font-size:11px;min-height:44px;padding:5px 0;text-align:left}
.reader details{margin-top:9px;padding-top:7px}.reader summary{min-height:44px;font-size:12px}
.hexagrams .hex-card.reading-active{outline:2px solid #9a8066;outline-offset:2px}
.hexagrams .line[aria-expanded="true"]{box-shadow:0 0 0 2px #9a806688;background:#fff5db}
.whole-reading{padding:16px 18px;margin:0 0 20px}
.whole-reading>.section-title{margin:0 0 10px}.whole-reading>.section-title small{letter-spacing:0;font-size:10px}
.judgment-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.judgment-tabs button{padding:7px 5px;min-height:44px;font-size:12px;white-space:normal}
.judgment-tabs button[aria-pressed="true"]{background:var(--green);color:white;border-color:var(--green)}
.judgment-panel{border-top:1px solid var(--line);margin-top:14px;padding-top:13px;min-width:0}
.judgment-panel>.original{font-size:24px;line-height:1.9;overflow-wrap:anywhere}
.judgment-panel .special-text{border-left:2px solid #b6a17e;padding:5px 13px;margin:14px 0;background:#f5f0e3}
.judgment-panel .special-text h3{font-size:17px;margin:3px 0}.judgment-panel .special-text .original{font-size:21px}
.judgment-panel .hint{font-size:11px}.judgment-panel details{margin-top:12px}
.comparison-cell .line-structure{font-size:11px;line-height:1.8;color:var(--muted);margin:3px 0 9px}
.reading-layout{display:block}.reading-layout>.reflection{max-width:650px;margin-top:20px}
@media(min-width:1200px){
 .observation-layout[data-reading-open="true"]{grid-template-columns:minmax(0,1fr) minmax(270px,34%);gap:16px}
 .observation-layout>.reader{height:440px;overflow:auto;scrollbar-gutter:stable;padding:15px}
 .observation-layout[data-reading-open="true"] .hexagrams{gap:9px}
 .observation-layout[data-reading-open="true"] .hexagrams.mutual-open{grid-template-columns:minmax(0,1fr) min(27%,120px) minmax(0,1fr)}
 .observation-layout[data-reading-open="true"] .hex-card{padding-left:7px;padding-right:7px}
 .observation-layout[data-reading-open="true"] .hex-title{display:block}
 .observation-layout[data-reading-open="true"] .hex-title h2{font-size:25px}
 .observation-layout[data-reading-open="true"] .hex-title>small{display:block;font-size:8px}
 .observation-layout[data-reading-open="true"] .mutual-card .hex-title{padding-right:44px}
 .observation-layout[data-reading-open="true"] .mutual-card .hex-title h2{font-size:20px}
 .reader-primary .original{font-size:23px}
}
@media(max-width:850px){
 .observation-layout{gap:12px}.observation-layout>.reader{padding:16px}
 .reader-primary .original{font-size:24px}.whole-reading{padding:15px}
 .near-reader-head h2,.judgment-head h2{font-size:23px}
 .whole-reading>.section-title{display:block}.whole-reading>.section-title small{display:block;margin-top:3px}
 .judgment-tabs{gap:5px}.judgment-tabs button{font-size:11px;padding:6px 3px}
 .comparison-cell .line-structure{font-size:10px}
}