/* Three-line calculations flow into the actual six-line hexagram names. */
.formation-reading{padding:12px;border:1px solid #ded7c6;background:#f7f5eb;border-radius:10px;margin:0 0 20px;min-width:0}
.formation-reading .number-calculation{margin:0 0 8px}
.formation-reading .observation-layout{margin-bottom:0}
.composition-link{display:flex;align-items:center;justify-content:center;font-size:11px;color:#7d735f;line-height:1.7;min-height:26px;margin:0 0 8px;text-align:center}
.calc-result{flex-wrap:nowrap;gap:3px;margin-top:4px}
.calc-result>.calc-sequence{display:inline-flex;font-size:10px;white-space:nowrap}
.calc-card .calc-trigram-name{background:transparent;border-color:transparent;padding:0;min-width:44px;width:44px;min-height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:5px}
.calc-trigram-name strong{font:22px/1.1 'Songti SC',serif;text-decoration:underline;text-decoration-color:#aaa086;text-underline-offset:4px}
.calc-trigram-name small{font-size:9px;color:var(--muted);line-height:1.5;margin-top:3px}
.calc-trigram-name:hover,.calc-trigram-name[aria-expanded="true"],.calc-line-link:hover{background:#ece4cb;border-color:#cec1a3}
.calc-card .calc-line-link{min-height:44px;padding:5px 7px;border-color:transparent;background:transparent;font-size:16px;line-height:1.4;margin-top:3px;text-decoration:underline;text-decoration-color:#aaa086;text-underline-offset:4px}
.calc-line-link span{font-size:10px;color:var(--muted)}
.calc-line-link[aria-expanded="true"]{background:#ece4cb;border-color:#cec1a3}
.trigram-info{padding:10px 13px;background:#fbf8ee;border:1px solid #d6cbb3;border-radius:7px;margin:0 0 10px}
.trigram-info-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.trigram-info-head h3{font-size:21px;margin:0}.trigram-info-head button{min-height:44px;min-width:44px;padding:5px;font-size:11px}
.trigram-info p{font-size:12px;margin:4px 0}.trigram-info .hint{font-size:11px;line-height:1.7}.trigram-info details{margin-top:8px;padding-top:5px}.trigram-info summary{font-size:11px}
.hexagrams .hex-title h2{display:flex;align-items:center;height:32px;min-width:0}
.hexagrams .mutual-card .hex-title h2{height:22px}
.hexagrams .hex-name{font:inherit;line-height:1.1;min-height:44px;min-width:44px;padding:0;background:transparent;border:1px solid transparent;border-radius:5px;text-decoration:underline;text-decoration-color:#aaa086;text-underline-offset:5px}
.hexagrams .hex-name:hover,.hexagrams .hex-name[aria-pressed="true"]{background:#ede3c8;border-color:#b9a686}
.hexagrams .hex-card.judgment-active{outline:2px solid #9a8066;outline-offset:2px}
.observation-layout>.judgment-panel{min-width:0;margin:0;padding:18px;height:auto;max-height:none;overflow:visible;border-top:2px solid #b7c0a8}
#judgment-primary>.original{font:24px/1.85 'Songti SC','STSong',serif;letter-spacing:.6px;margin:12px 0;overflow-wrap:anywhere}
.judgment-head h2{font-size:22px;overflow-wrap:anywhere}
.judgment-panel details{margin-top:9px;padding-top:7px}
@media(min-width:1200px){
 .observation-layout>.judgment-panel{height:440px;padding:15px;overflow:auto;scrollbar-gutter:stable}
 .observation-layout[data-reading-open="true"] .hex-title h2{height:24px}
 .observation-layout[data-reading-open="true"] .mutual-card .hex-title h2{height:22px}
}
@media(max-width:850px){
 .formation-reading{padding:9px}.composition-link{font-size:10px;min-height:25px;margin-bottom:7px}
 .calc-result>.calc-sequence{font-size:9px}.calc-result{gap:2px}.calc-result .calc-trigram{width:26px;margin-left:auto}
 .calc-card .calc-trigram-name strong{font-size:20px}
 .calc-card[data-calc="moving"] .calc-line-link{font-size:12px;margin:0;padding:4px 5px}
 .hexagrams .hex-title h2{height:28px}.hexagrams .mutual-card .hex-title h2{height:20px}
 .observation-layout>.judgment-panel{padding:16px}
 .trigram-info{padding:9px 11px}.trigram-info-head h3{font-size:19px}
}
@media(max-width:360px){
 .formation-reading{padding:7px}.calc-card{padding:6px}.calc-result>.calc-sequence{font-size:8px}.calc-result .calc-trigram{width:18px}
 .hexagrams .hex-name{font-size:inherit}
}
/* Give each clickable name a full touch target, clear of the role and number. */
.formation-reading .hexagrams{min-height:462px}
.formation-reading .hexagrams .hex-card{height:462px;min-height:462px}
.formation-reading .hexagrams .hex-title{display:block;height:54px}
.formation-reading .hexagrams .hex-title h2{height:44px;display:flex;align-items:center}
.formation-reading .hexagrams .hex-title>small{display:block;font-size:8px;line-height:10px;height:10px}
.formation-reading #mutual-expand{top:235px}
@media(min-width:1200px){.formation-reading .observation-layout>.reader,.formation-reading .observation-layout>.judgment-panel{height:462px}}
@media(max-width:850px){
 .formation-reading .hexagrams{min-height:458px}
 .formation-reading .hexagrams .hex-card{height:458px;min-height:458px}
 .formation-reading #mutual-expand{top:233px}
}