/* 分组栏仅受第二帧阅读区约束，不使用全局 fixed 或内部滚动。 */
.ability-reading { position: relative; scroll-margin-top: var(--header-height); }
.capability-overview { position: sticky; top: var(--header-height); z-index: 7; padding: 12px 0 18px; background: linear-gradient(180deg, #f7f1ed 0%, rgba(247,241,237,.98) 82%, rgba(247,241,237,0) 100%); }
.overview-choices { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px 12px; }
.overview-choice { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; min-width: 0; padding: 16px 12px; border: 0; border-radius: 11px; background: linear-gradient(145deg,#fffdfa,#f3ece8); color: #514b4e; text-align: left; font: inherit; cursor: pointer; box-shadow: 0 4px 10px rgba(61,42,48,.09), 0 1px 2px rgba(61,42,48,.06), inset 0 1px 0 rgba(255,255,255,.85); }
.choice-title { font-size: 15px; font-weight: 650; line-height: 1.5; align-self: start; }
.choice-count { font-size: 12px; line-height: 1.5; color: #797075; }
.choice-keywords { font-size: 12px; line-height: 1.8; color: #706771; }
.overview-choice[aria-pressed="true"] { background: linear-gradient(145deg,#ede2f0,#dfcfe5); color: #35233e; box-shadow: 0 5px 13px rgba(97,61,109,.19), inset 0 1px 0 rgba(255,255,255,.65); }
.overview-choice[aria-pressed="true"] .choice-count, .overview-choice[aria-pressed="true"] .choice-keywords { color: #594260; }
.overview-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 一张连续暖白阅读面，与暖灰底布拉开；正文区外才淡出到人物。 */
#ability-groups { isolation: isolate; margin-top: 8px; padding: 12px 24px 24px; }
#ability-groups::before { content: ''; display: block; position: absolute; z-index: -1; inset: 0 -64px 0 0; width: auto; border: 0; border-radius: 12px 0 0 12px; box-shadow: none; background: linear-gradient(90deg,#fffdfa 0%,#fffdfa calc(100% - 64px),rgba(255,253,250,0) 100%); }
.ability-family { border: 0; }
.ability-family[hidden] { display: none !important; }
.ability-entry { padding: 28px 0 34px; }
.ability-title { font-size: clamp(25px,2vw,29px); font-weight: 730; color: #262022; }
.ability-number strong { color: #9b869d; font-size: 16px; }
.ability-content { padding-top: 15px; }
.ability-judgment { color: #57415e; font-size: 18px; font-weight: 600; line-height: 1.65; }
.ability-body { color: #655f5c; line-height: 1.85; margin-top: 14px; }
.ability-body strong { color: #393236; }
.ability-entry + .ability-entry::before { opacity: 1; background: rgba(98,78,89,.13); }
.case-footer { padding-top: 15px; margin-top: 20px; border-top-color: rgba(98,78,89,.1); }
@supports not (grid-template-rows: subgrid) { .overview-choice { grid-row: auto; grid-template-rows: 3em 1.5em 1fr; } }
@media (max-width: 1050px) { .overview-choices { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 10px; } .overview-choice { padding: 10px 12px; row-gap: 3px; } }
@media (max-width: 767px) { .choice-title { font-size: 14px; } .choice-keywords { font-size: 11px; line-height: 1.5; } .choice-count { font-size: 11px; } .capability-overview { padding-top: 8px; padding-bottom: 12px; } #ability-groups { padding: 8px 14px 20px; } #ability-groups::before { right: -18px; background: #fffdfa; } .ability-title { font-size: 24px; } }
@media print { .capability-overview { display: none; } .ability-family[hidden] { display: block !important; } }