/* Place sheet sections by name so a spanning skill panel cannot push identity and attributes down. */
.reference-sheet .layout{container-type:inline-size;container-name:hero-sheet}
.hero-reference{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'toolbar' 'jump' 'identity' 'attributes' 'resources' 'quirk' 'combat' 'skills' 'notes' 'tree' 'conditions' 'gear' 'knowledge' 'story' 'rules';gap:18px;min-width:0}
.hero-reference>*{width:100%;min-width:0}
.hero-reference>.skill-section{border-left:0;border-top:1px solid #cdd4db}
.hero-reference>.identity-section{order:0}
.hero-reference>.attribute-section{order:0}
.hero-reference>.combat-section{order:0}
.hero-reference>.quirk-section{order:0}
.hero-reference>.session-toolbar{grid-area:toolbar}
.hero-reference>.section-jump{grid-area:jump}
.hero-reference>.identity-section{grid-area:identity}
.hero-reference>.attribute-section{grid-area:attributes}
.hero-reference>.combat-section{grid-area:combat}
.hero-reference>.quirk-section{grid-area:quirk}
.hero-reference>.skill-section{grid-area:skills}
.hero-reference>.passive-section{grid-area:passive}
.hero-reference>.powers-section{grid-area:powers}
.hero-reference>.tree-section{grid-area:tree}
.hero-reference>.conditions-section{grid-area:conditions}
.hero-reference>.gear-section{grid-area:gear}
.hero-reference>.knowledge-section{grid-area:knowledge}
.hero-reference>.story-section{grid-area:story}
.hero-reference>details{grid-area:rules}
.skill-columns,.hero-reference .skill-section .fields .editable-skill-row{display:grid;grid-template-columns:minmax(0,1fr) 46px 64px;gap:9px;align-items:center}
.skill-columns{padding:10px 0 8px;border-bottom:2px solid #c5d3e7;font-size:9px;font-weight:800;letter-spacing:.6px;color:#4b6484}
.skill-columns span:nth-child(n+2){text-align:center}
.hero-reference .skill-section .fields .editable-skill-row{min-height:42px;margin:0;padding:5px 0;color:#344c6a;font-size:12px;line-height:1.35}
.hero-reference .skill-section .skill-bonus-input{width:64px;max-width:100%;height:30px;margin:0;padding:4px 5px;border:1px solid #a8bfdc;border-radius:3px;background:#f5f9ff;color:#164d89;text-align:center;font-size:13px;font-weight:700;cursor:text}
.hero-reference .skill-section .skill-bonus-input:focus{background:#fff;border-color:#2666ab;outline:2px solid #a4c6eb}
.skill-row-total{display:block;text-align:center;font-size:15px;font-weight:800;color:#234f82}
.hero-reference .skill-section .hint{font-size:11px;line-height:1.6}
.creation-skill-distribution{scroll-margin-top:20px}
#evolution-skills{scroll-margin-top:25px}
.quirk-meta{display:flex;flex-direction:column;gap:5px;margin:8px 0 16px;font-size:11px;color:#566a85}
.quirk-compact-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.quirk-compact-stats>div{border:1px solid #c4d2e6;border-top:3px solid #ceaf51;padding:12px 4px;text-align:center;background:#f8fbff}
.quirk-compact-stats span,.quirk-compact-stats small{display:block;font-size:10px;color:#617a99}
.quirk-compact-stats strong{display:block;font-size:26px;color:#234d82;margin:8px 0}
.quirk-compact-stats button{font-size:9px;padding:6px 3px;margin-top:10px;width:100%;border-color:#bbcee5;color:#214f86}
.hero-reference .quirk-section .section-top{margin-bottom:12px;align-items:center}
.hero-reference .quirk-section .section-top h3{margin:0;text-align:left}
.hero-reference .attribute-section{padding-top:12px;padding-bottom:10px}
.hero-reference .attribute-section::before{margin-bottom:8px}
.hero-reference .attribute-section .attribute-ring{height:335px;margin:6px auto 26px}
@media(max-width:430px){.quirk-compact-stats{grid-template-columns:1fr 1fr}}
@container hero-sheet (min-width:480px){
 .hero-reference{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'toolbar toolbar' 'jump jump' 'identity identity' 'attributes skills' 'resources skills' 'quirk skills' 'combat notes' 'tree tree' 'conditions gear' 'knowledge story' 'rules rules';gap:18px;align-items:start}
 .hero-reference>.session-toolbar{grid-area:toolbar}
 .hero-reference>.section-jump{grid-area:jump}
 .hero-reference>.identity-section{grid-area:identity}
 .hero-reference>.attribute-section{grid-area:attributes}
 .hero-reference>.combat-section{grid-area:combat}
 .hero-reference>.quirk-section{grid-area:quirk}
 .hero-reference>.skill-section{grid-area:skills;border-left:1px solid #cdd4db;border-top:0;padding-left:20px}
 .hero-reference>.passive-section{grid-area:passive}
 .hero-reference>.powers-section{grid-area:powers}
 .hero-reference>.tree-section{grid-area:tree}
 .hero-reference>.conditions-section{grid-area:conditions}
 .hero-reference>.gear-section{grid-area:gear}
 .hero-reference>.knowledge-section{grid-area:knowledge}
 .hero-reference>.story-section{grid-area:story}
 .hero-reference>details{grid-area:rules}
}
@container hero-sheet (min-width:480px) and (max-width:700px){
 .hero-reference{gap:12px;padding:12px}
 .hero-reference>.card{padding:8px}
 .hero-reference .attribute-section .attribute-ring{width:340px;max-width:none;position:relative;left:50%;margin-left:-170px;height:335px;transform:scale(.68);transform-origin:50% 0;margin-bottom:-65px}
 .hero-reference .attribute-section::before{font-size:9px;letter-spacing:2px}
 .hero-reference .attribute-section>.hint{font-size:9px}
 .hero-reference>.skill-section{padding-left:10px}
 .hero-reference .skill-section .fields .editable-skill-row{font-size:10px;grid-template-columns:minmax(0,1fr) 30px 44px;gap:5px}
 .skill-columns{grid-template-columns:minmax(0,1fr) 30px 44px;gap:5px;font-size:8px}
 .hero-reference .skill-section .skill-bonus-input{width:44px;font-size:12px}
 .hero-reference .skill-section .hint{font-size:9px}
 .quirk-compact-stats{grid-template-columns:1fr 1fr;gap:6px}
 .quirk-compact-stats>div{padding:8px 3px}
 .quirk-compact-stats strong{font-size:23px;margin:5px 0}
 .hero-reference .quirk-section .section-top h3{font-size:12px}
 .hero-reference .quirk-section .section-top button{font-size:9px;padding:7px 4px}
}


.hero-reference>.awakening-section{grid-area:awakening}

.editable-skill-row .skill-row-name{border:0;background:transparent;text-align:left;color:inherit;padding:5px 0;cursor:pointer;font:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}.editable-skill-row .skill-row-name:hover{color:#1765ad}.editable-skill-row .skill-row-name:focus-visible{outline:2px solid #1765ad;outline-offset:3px}

.hero-reference>.hero-combat-notes{grid-area:notes;display:flex;flex-direction:column;gap:18px;min-width:0}.hero-combat-notes>.card{width:100%;min-width:0;margin:0!important}.hero-combat-notes .master-card-grid{grid-template-columns:minmax(0,1fr)}.hero-combat-notes .section-top{flex-wrap:wrap;gap:10px}.hero-combat-notes textarea{width:100%;resize:vertical}.hero-combat-notes .awakening-child-cards{grid-template-columns:minmax(0,1fr)}

.hero-combat-notes .power-list{grid-template-columns:minmax(0,1fr)}.hero-combat-notes .powers-section .section-top{flex-wrap:wrap}

.hero-reference .combat-section .combat-range-readout{display:flex;flex-direction:column;gap:4px;padding:9px 6px;margin:12px 5px 4px;border:1px solid #c4d6e9;border-radius:5px;background:#fff;text-align:center;min-width:0}.hero-reference .combat-range-readout>span{font-size:8px;letter-spacing:.06em;color:#607d99}.hero-reference .combat-range-readout>b{font-size:14px;line-height:1.4;color:#244f7e}.hero-reference .combat-range-readout>small{font-size:9px;line-height:1.5;color:#6b8199;overflow-wrap:anywhere}

.hero-reference .combat-section .combat-stats-with-range{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:5px;align-items:stretch}.combat-stats-with-range>.stat:nth-child(1){grid-column:1;grid-row:1}.combat-stats-with-range>.stat:nth-child(2){grid-column:2;grid-row:1}.combat-stats-with-range>.stat:nth-child(3){grid-column:3;grid-row:1 / 3}.combat-stats-with-range>.stat:nth-child(4){grid-column:1;grid-row:3}.combat-stats-with-range>.stat:nth-child(5){grid-column:2;grid-row:3}.combat-stats-with-range>.stat:nth-child(6){grid-column:3;grid-row:3}.combat-stats-with-range>.combat-reach-tile{grid-column:1;grid-row:2}.combat-stats-with-range>.combat-area-tile{grid-column:2;grid-row:2}.hero-reference .combat-section .combat-stats-with-range>.combat-range-readout{margin:0;padding:9px 6px;background:#f1f6fc;border:1px solid #c4d6e9;border-bottom:3px solid #245d91;border-radius:5px;justify-content:center}

.hero-reference>.hero-resources-section{grid-area:resources;min-width:0}.hero-reference .hero-resources-section .hero-status-resources{margin:0}

/* Independent stacks let shorter cards follow each other without empty grid rows. */
.hero-reference{display:flex!important;flex-direction:column;gap:18px}.hero-sheet-columns{display:flex;flex-direction:column;gap:18px;min-width:0}.hero-sheet-column{display:flex;flex-direction:column;gap:18px;min-width:0}.hero-sheet-column>*{width:100%;min-width:0;margin:0!important}.hero-sheet-column>.hero-combat-notes{display:flex;flex-direction:column;gap:18px}.hero-sheet-column>.skill-section{border-left:0;padding-left:0}.hero-sheet-column>.card{height:auto;align-self:stretch}
@container hero-sheet (min-width:480px){.hero-sheet-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}.hero-sheet-column>.skill-section{border-left:1px solid #cdd4db;padding-left:20px}}
@container hero-sheet (min-width:480px) and (max-width:700px){.hero-sheet-columns,.hero-sheet-column,.hero-sheet-column>.hero-combat-notes{gap:12px}.hero-sheet-column>.skill-section{padding-left:10px}}

/* Refine the original radial badge layout without changing its identity. */
.hero-reference .attribute-section{container-type:inline-size;container-name:hero-status;background:radial-gradient(ellipse at center,#eef5ff 0%,#fff 72%);border:1px solid #cbdced;border-top:3px solid #24588c;border-radius:10px;padding:18px!important}.hero-reference .attribute-section::before{margin:0 0 14px;letter-spacing:3px;font-size:11px}.hero-reference .attribute-section>.hint{font-size:11px;line-height:1.6;color:#6a8198}.hero-reference .attribute-section>p:nth-of-type(2).hint{display:none}.hero-reference .attribute-section .attribute-ring{display:block;position:relative;left:auto;width:100%;max-width:360px;height:370px;margin:12px auto 25px;transform:none;background:radial-gradient(circle at center,transparent 28%,#bfd2e8 28.4%,transparent 29.1%,transparent 36%,#dce7f3 36.5%,transparent 37%)}.hero-reference .attribute-section .attribute-ring::before{inset:77px;border-color:#d2dfed;background:linear-gradient(135deg,#dceafb70,transparent)}.hero-reference .attribute-section .attribute-ring>.stat{position:absolute;left:calc(50% + 32% * sin(var(--i) * 60deg));top:calc(47% - 31% * cos(var(--i) * 60deg));width:82px;height:82px;padding:10px 4px;border:2px solid #24588c;outline:1px solid #d6b650;outline-offset:3px;border-radius:15px;background:linear-gradient(150deg,#fff 35%,#e7f0fc);box-shadow:0 5px 12px #17396016;transform:translate(-50%,-50%) rotate(-2deg)}.hero-reference .attribute-section .attribute-ring>.stat:nth-child(even){border-color:#b33449;background:linear-gradient(150deg,#fff 35%,#fcecef);transform:translate(-50%,-50%) rotate(2deg)}.hero-reference .attribute-section .attribute-ring>.stat label{font-size:9px;letter-spacing:.02em}.hero-reference .attribute-section .attribute-ring>.stat input{font-size:30px;line-height:1.1;font-weight:900}.hero-reference .attribute-section .attribute-ring>.stat .hint{font-size:9px;line-height:1.3;color:#71869c}.hero-reference .attribute-section .attribute-ring>.stat button{top:89px;left:-1px;right:-1px;min-height:27px;border:1px solid #d6b650;border-radius:5px;box-shadow:0 2px 4px #17396012;padding:5px 2px;font-size:10px;line-height:1.2}.hero-reference .attribute-section .attribute-ring>.stat button:focus-visible{outline:3px solid #e5bf4e;outline-offset:3px}.hero-reference .attribute-section .ring-center{top:47%;width:108px;height:122px;font-size:12px;letter-spacing:.6px;background:linear-gradient(145deg,#2a649f,#143962);text-shadow:0 1px 1px #0d2848}.hero-reference .attribute-section .ring-center::before{font-size:26px;top:15px}.hero-reference .attribute-section .ring-center::after{bottom:22px;font-size:8px;letter-spacing:1.5px}.hero-reference .attribute-section>.hint:last-child{padding-top:12px;border-top:1px solid #e0e9f3;font-size:10px;margin-bottom:0}
@container hero-status (max-width:290px){.hero-reference .attribute-section .attribute-ring{height:315px;margin-bottom:20px}.hero-reference .attribute-section .attribute-ring>.stat{width:66px;height:72px;padding:8px 2px;border-radius:12px;outline-offset:2px;left:calc(50% + 33% * sin(var(--i) * 60deg));top:calc(46% - 31% * cos(var(--i) * 60deg))}.hero-reference .attribute-section .attribute-ring>.stat input{font-size:25px}.hero-reference .attribute-section .attribute-ring>.stat label{font-size:8px}.hero-reference .attribute-section .attribute-ring>.stat .hint{font-size:8px}.hero-reference .attribute-section .attribute-ring>.stat button{top:77px;min-height:25px;font-size:9px}.hero-reference .attribute-section .ring-center{top:46%;width:80px;height:103px;font-size:10px}.hero-reference .attribute-section .ring-center::before{font-size:21px;top:12px}.hero-reference .attribute-section .ring-center::after{font-size:6px;letter-spacing:1px;bottom:19px}.hero-reference .attribute-section .attribute-ring::before{inset:70px 45px}}

/* Give the radial attribute cards and their roll buttons more breathing room. */
.hero-reference .attribute-section .attribute-ring{max-width:390px;height:405px;margin-top:18px;margin-bottom:28px}.hero-reference .attribute-section .attribute-ring>.stat{left:calc(50% + 35% * sin(var(--i) * 60deg));top:calc(47% - 33% * cos(var(--i) * 60deg))}
@container hero-status (max-width:290px){.hero-reference .attribute-section .attribute-ring{height:345px;margin-top:16px;margin-bottom:24px}.hero-reference .attribute-section .attribute-ring>.stat{left:calc(50% + 35% * sin(var(--i) * 60deg));top:calc(46% - 33% * cos(var(--i) * 60deg))}}