/* Skills archive. Uses the established Elements visual language. */
.skillsArchive{--skill-accent:#aeb9cc;--skill-rgb:174,185,204;padding:18px;border:1px solid rgba(var(--skill-rgb),.4);border-radius:6px;background:linear-gradient(180deg,rgba(7,9,14,.65),rgba(7,9,14,.88)),url('assets/elements/section-background.png') center top / cover no-repeat}
.skillsArchive:has([data-sub="sub10_2"].isActive){--skill-accent:rgb(255,90,93);--skill-rgb:255,90,93}
.skillsArchive>.subBar{gap:8px;margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid rgba(var(--skill-rgb),.45)}
.skillsArchive>.subBar .subBtn{font-size:11px;padding:8px 13px;border-radius:4px;background:rgba(11,13,18,.92);border-color:#343b47;color:#bdc4d0;transition:color 220ms,border-color 220ms,background 220ms}
.skillsArchive>.subBar .subBtn.isActive{color:#f8f4f5;background:rgba(var(--skill-rgb),.17);border-color:var(--skill-accent);box-shadow:inset 0 -2px 0 var(--skill-accent)}
.skillsArchive>.subBar .subBtn:not(.isActive):hover{color:#fff;border-color:#758094;background:#1e232d}
.skillsArchive .skillsHeader{position:relative;isolation:isolate;overflow:hidden;min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 25px;margin:0 0 18px;background:linear-gradient(100deg,rgba(12,15,21,.96),rgba(12,15,21,.82));border-top:1px solid rgba(var(--skill-rgb),.55);border-bottom:1px solid rgba(var(--skill-rgb),.4)}
.skillsEyebrow{font-size:9px;font-weight:600;letter-spacing:.18em;color:#a3adbf;margin:0 0 8px;line-height:1.5}
.skillsHeader h2{position:relative;z-index:1;font-family:'Cinzel',Georgia,serif;font-size:27px;line-height:1.2;font-weight:500;margin:0;color:var(--paper)}
.skillsIntroNote{position:relative;z-index:1;font-size:11px;color:#a9afbb;margin:11px 0 0;line-height:1.5}
.skillsCount{position:relative;z-index:1;flex:none;font-size:10px;padding:6px 10px;border:1px solid rgba(var(--skill-rgb),.65);border-radius:3px;color:#d9dce4;background:#101217;align-self:flex-end}
#sub10_2 .skillsHeader::after{content:'';position:absolute;right:55px;top:-55px;width:240px;height:245px;background:url('assets/elements/kyokasuigetsu.png') center / contain no-repeat;opacity:.18;transform:rotate(16deg);pointer-events:none;z-index:0}
.skillsArchive .tierBar{max-width:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;padding:0;border:0}
.skillsArchive .tierBtn{font-size:10px;font-weight:600;line-height:1.5;padding:7px 13px;border:1px solid #373e49;border-radius:4px;color:#aeb6c5;background:rgba(11,13,18,.94);transition:color 220ms,border-color 220ms,background 220ms}
.skillsArchive .tierBtn.isActive{border-color:#bac0cb;background:#30353f;color:#f0edf2;box-shadow:inset 0 -2px 0 #bac0cb}
.skillsArchive .tierBtn:not(.isActive):hover{border-color:var(--skill-accent);color:#fff;background:#20252e}
.skillsArchive .tierBtn:focus-visible,.skillsArchive .subBtn:focus-visible{outline:2px solid var(--skill-accent);outline-offset:3px}
.skillsArchive .kendoContent.isActive{display:block}.kendoTree{max-width:none;margin:0;display:flex;justify-content:center;flex-wrap:wrap;align-items:stretch;gap:14px}
.kendoSkill{flex:0 0 calc((100% - 28px)/3);min-width:0;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-height:245px;padding:18px 19px 20px;border:1px solid #373a46;border-radius:5px;background:linear-gradient(145deg,#1c1f28,#13161d 82%);box-shadow:0 5px 15px rgba(0,0,0,.17);transition:transform 240ms,border-color 240ms,box-shadow 240ms}
.kendoSkill::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,rgba(var(--skill-rgb),.085),transparent 65%);opacity:.7;transition:opacity 240ms}
.kendoSkill::after{content:'';position:absolute;bottom:0;left:19px;width:28px;height:2px;background:var(--skill-accent);opacity:.4}
.skillCardMeta{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-size:9px;line-height:1.4;color:#aab3c4;letter-spacing:.06em;margin-bottom:18px}
.skillKind{border:1px solid #414654;border-radius:3px;padding:3px 6px;color:#c5cbd6;letter-spacing:0}
[data-skill-kind="hybrid"] .skillKind,[data-skill-kind="passive"] .skillKind{border-color:rgba(var(--skill-rgb),.4);color:var(--skill-accent);background:rgba(var(--skill-rgb),.07)}
.skillRequirements{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 16px;margin:0 0 15px;min-height:38px}
.skillRequirement{display:flex;align-items:baseline;gap:6px;line-height:1.1}
.skillRequirement strong{font-size:29px;letter-spacing:-.035em;font-weight:600;color:var(--skill-accent)}
.skillRequirement>span{font-size:9px;line-height:1.4;color:#b4bac6;max-width:76px}
.kendoSkill h4{font-family:'Manrope',Arial,sans-serif;font-size:17px;font-weight:600;line-height:1.35;color:#f0edf2;margin:0 0 10px}
.kendoSkill>p{font-size:12px;line-height:1.8;color:#b6becc;margin:0;overflow-wrap:anywhere}
.skillsArchive .skillsEmpty{grid-column:1/-1;min-height:180px;padding:28px;border:1px solid #343a46;border-radius:5px;background:rgba(18,21,28,.97);display:flex;flex-direction:column;justify-content:center}
.skillsEmpty h3{font-family:'Cinzel',Georgia,serif;font-size:21px;font-weight:500;color:#d8dde7;margin:2px 0 10px}.skillsEmpty>p{font-size:12px;line-height:1.7;color:#a2adbf;margin:0}
@media(hover:hover) and (pointer:fine){.kendoSkill:hover{transform:translateY(-3px);border-color:rgba(var(--skill-rgb),.65);box-shadow:0 9px 22px rgba(0,0,0,.25),0 0 15px rgba(var(--skill-rgb),.07)}.kendoSkill:hover::before{opacity:1}}
@media(max-width:950px){.kendoSkill{flex-basis:calc((100% - 14px)/2)}}
@media(max-width:650px){.skillsArchive{padding:12px}.skillsArchive>.subBar{gap:7px;padding-bottom:13px;margin-bottom:15px}.skillsArchive>.subBar .subBtn{font-size:10px;padding:8px 10px}.skillsArchive .skillsHeader{min-height:110px;padding:19px 17px;margin-bottom:15px}.skillsHeader h2{font-size:23px}.skillsCount{font-size:9px}.skillsArchive .tierBtn{font-size:10px;padding:7px 10px}.kendoSkill{padding:17px;min-height:225px}.kendoSkill h4{font-size:16px}.skillCardMeta{font-size:8px;gap:5px}.skillRequirement strong{font-size:27px}.skillRequirement>span{font-size:8px}}
@media(max-width:490px){.kendoSkill{flex-basis:100%;min-height:0;padding:19px}.skillCardMeta{font-size:9px}.skillRequirements{margin-bottom:13px}.skillRequirement>span{font-size:10px;max-width:none}.kendoSkill>p{font-size:13px}.kendoSkill h4{font-size:18px}.skillsHeader h2{font-size:21px}#sub10_2 .skillsHeader::after{right:5px;opacity:.12}}
@media(prefers-reduced-motion:reduce){.skillsArchive *,.skillsArchive *::before,.skillsArchive *::after{transition:none!important;animation:none!important}.kendoSkill:hover{transform:none}}
@media(forced-colors:active){.kendoSkill,.skillsHeader,.skillsArchive{border:1px solid CanvasText}}

/* Discipline navigation and the user's Cero palette. */
.skillsArchive[data-active-skill-group="hakuda"]{--skill-accent:rgb(186,92,181);--skill-rgb:186,92,181}
.skillsArchive[data-active-skill-group="kendo"]{--skill-accent:rgb(255,90,93);--skill-rgb:255,90,93}
.skillsArchive[data-active-skill-group="healing"]{--skill-accent:rgb(255,231,108);--skill-rgb:255,231,108}
.skillsArchive[data-active-skill-group="speed"]{--skill-accent:rgb(67,101,255);--skill-rgb:67,101,255}
.skillsArchive[data-active-skill-group="kido"]{--skill-accent:rgb(150,70,255);--skill-rgb:150,70,255}
.skillsArchive[data-active-skill-group="kido"]:has([data-sub="sub10_3"].isActive){--skill-accent:rgb(120,200,255);--skill-rgb:120,200,255}

.skillsArchive[data-active-skill-group="kido"]:has([data-sub="sub10_5"].isActive){--skill-accent:rgb(125,195,255);--skill-rgb:125,195,255}
.skillsArchive[data-active-skill-group="kido"]:has([data-sub="sub10_6"].isActive){--skill-accent:rgb(140,255,140);--skill-rgb:140,255,140}
.skillsPrimary{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:17px;margin-bottom:14px;border-bottom:1px solid rgba(var(--skill-rgb),.45)}
.skillGroupBtn{padding:10px 22px;font:inherit;font-size:12px;font-weight:600;color:#c3c9d4;background:rgba(11,13,18,.94);border:1px solid #363e4b;border-radius:4px;cursor:pointer}
.skillGroupBtn:hover{border-color:var(--skill-accent);color:#fff}
.skillGroupBtn.isActive{border-color:var(--skill-accent);color:#f5f3f8;background:rgba(var(--skill-rgb),.16);box-shadow:inset 0 -2px 0 var(--skill-accent)}
.skillGroupBtn:focus-visible{outline:2px solid var(--skill-accent);outline-offset:3px}
.skillsArchive>.skillVariants{border:0;padding:0;margin-bottom:18px}
.skillsArchive [hidden]{display:none!important}
/* One skill per row, with requirements to the left and description to the right. */
.kendoTree{display:flex;flex-direction:column;gap:12px}
.kendoSkill{flex:0 0 auto;width:100%;min-height:0;display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);column-gap:26px;row-gap:7px;padding:22px 24px;align-items:start}
.skillCardMeta{grid-column:1;grid-row:1;margin:0;font-size:9px;align-self:start;justify-content:flex-start;gap:10px}
.skillRequirements{grid-column:1;grid-row:2/span 2;min-height:0;margin:4px 0 0;align-self:start;gap:10px}
.kendoSkill h4{grid-column:2;grid-row:1;font-size:19px;line-height:1.4;margin:0}
.kendoSkill>p{grid-column:2;grid-row:2/span 2;font-size:13px;line-height:1.85;margin:0}
.skillRequirement strong{font-size:28px}.skillRequirement>span{font-size:10px;max-width:85px}
@media(max-width:650px){.skillGroupBtn{padding:9px 13px;font-size:11px}.skillsPrimary{gap:6px}.kendoSkill{grid-template-columns:135px minmax(0,1fr);gap:7px 18px;padding:19px}.kendoSkill h4{font-size:17px}}
@media(max-width:490px){.kendoSkill{grid-template-columns:1fr;padding:19px}.skillCardMeta{grid-column:1;grid-row:1}.skillRequirements{grid-column:1;grid-row:2;margin:7px 0}.kendoSkill h4{grid-column:1;grid-row:3;margin-top:2px}.kendoSkill>p{grid-column:1;grid-row:4}.skillRequirement>span{max-width:none}}

.skillItemRequirement{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid #363c49;color:#e0d8dc;font-size:12px}.skillItemRequirement>span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--skill-accent)}

.skillDataNote{display:block;margin-top:10px;font-size:10px;color:#9eacc1;line-height:1.7}.specialSkillReference{margin-top:24px;border:1px solid #3b4556;border-radius:5px;background:rgba(12,15,21,.96)}.specialSkillReference>summary{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;cursor:pointer;color:#dbe3ef}.specialSkillReference>summary>strong{font-size:14px}.specialSkillReference>summary>span{font-size:10px;color:#a1aec2}.specialReferenceBody{padding:0 22px 22px;border-top:1px solid #303948}.specialReferenceBody>h3{font:500 23px/1.3 'Cinzel',Georgia,serif;margin:24px 0 18px}.skillSourceIntro{font-size:12px;line-height:1.8;color:#aebbd0;margin:20px 0}.skillSourceFooter{font-size:12px;margin:20px 0 0}.skillSourceFooter>a{color:#c6d7f3}.specialSkillReference .skillRequirement>span{max-width:none}.specialSkillReference summary:focus-visible{outline:2px solid #aebed8;outline-offset:3px}@media(max-width:600px){.specialReferenceBody{padding:0 14px 18px}.specialSkillReference>summary{padding:16px}}
/* Click-through skill details; keep the archive state while viewing a skill. */
.kendoSkill{padding-bottom:43px}.skillOpenButton{position:absolute;inset:0;z-index:5;width:100%;border:0;border-radius:4px;background:transparent;color:#aab7ca;cursor:pointer;text-align:right;font:inherit;font-size:10px;padding:0}.skillOpenButton>span{position:absolute;right:18px;bottom:13px;display:flex;gap:12px;align-items:center}.skillOpenButton:hover{color:#f0edf2}.skillOpenButton:focus-visible{outline:2px solid var(--skill-accent);outline-offset:-3px}
.skillsArchive[data-skill-detail-open]>.subPanel,.skillsArchive[data-skill-detail-open]>.specialSkillReference{display:none!important}.skillDetailView{scroll-margin-top:90px;outline:none}.skillDetailView[hidden]{display:none!important}.skillDetailToolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 18px}.skillDetailBack{font:inherit;font-size:11px;background:#151a24;color:#d9e1ee;border:1px solid #465166;border-radius:4px;padding:9px 13px;cursor:pointer}.skillDetailBack:hover{border-color:var(--skill-accent);color:#fff}.skillDetailBack:focus-visible{outline:2px solid var(--skill-accent);outline-offset:3px}.skillDetailContext{font-size:10px;color:#acb9cc}.skillDetailView .skillsHeader{min-height:105px}.skillDetailKind{color:var(--skill-accent)}.skillDetailColumns{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:start}.skillDetailInformation{min-width:0}.skillDetailSection{padding:20px;background:rgba(17,21,29,.96);border:1px solid #354053;border-radius:5px;margin-bottom:14px}.skillDetailSection>h3{font-size:11px;letter-spacing:.06em;font-weight:600;color:#c3d0e4;margin:0 0 17px}.skillDetailRequirements{margin:0;min-height:0}.skillDetailItem{font-size:12px;color:#ded7e1;border-top:1px solid #303a4b;padding-top:13px;margin:15px 0 0}.skillDetailDescription{font-size:13px;line-height:1.9;color:#d2dbe9;margin:0;white-space:normal;overflow-wrap:anywhere}.skillDetailStats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skillCombatStat{display:flex;flex-direction:column;gap:7px;padding:13px;background:#0d1119;border:1px solid #2e394a;border-radius:4px;min-width:0}.skillCombatStat>span{font-size:9px;color:#9eacc1}.skillCombatStat>strong{font-size:18px;font-weight:600;color:#edf1f8;overflow-wrap:anywhere}.skillRuntimeStatus,.skillRuntimeCaution{font-size:10px;line-height:1.8;color:#9daec6;margin:15px 0 0}.skillPhaseStats{margin:0;display:flex;flex-direction:column;gap:10px}.skillPhaseStats>div{display:flex;justify-content:space-between;gap:18px;padding-bottom:9px;border-bottom:1px solid #2c3543}.skillPhaseStats dt{font-size:10px;color:#b2c0d6;overflow-wrap:anywhere}.skillPhaseStats dd{font-size:11px;color:#e0e8f4;margin:0;text-align:right;overflow-wrap:anywhere}.skillDetailMedia{min-width:0;position:sticky;top:90px}.skillMediaPlaceholder{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;text-align:center;background:linear-gradient(145deg,#171d28,#0b0f16);border:1px dashed #526079;border-radius:5px}.skillMediaIcon{font-size:38px;color:#8f9eb8;line-height:1}.skillMediaPlaceholder h3{font-size:14px;font-weight:600;color:#ced9e9;margin:17px 0 8px}.skillMediaPlaceholder p{font-size:11px;line-height:1.7;color:#95a6bf;margin:0;max-width:220px}
@media(max-width:800px){.skillDetailColumns{grid-template-columns:1fr}.skillDetailMedia{position:static;grid-row:1}.skillMediaPlaceholder{aspect-ratio:16/7;min-height:165px}.skillDetailSection{padding:18px}.skillDetailView .skillsHeader h2{font-size:22px}.skillDetailContext{font-size:9px}}
@media(prefers-reduced-motion:reduce){.skillDetailView{scroll-behavior:auto}}
