/* Ability tiles are stable navigation. Detail belongs to one illuminated
   dialog, so opening Strength can never rearrange Dexterity through Charisma. */
.ab-card:has(.ab-toggle[aria-expanded="true"]){grid-column:auto}
.ab-open{
  width:100%;
  min-width:0;
  min-height:176px;
  text-align:inherit;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease,transform .12s ease;
}
.ab-open:hover{
  border-color:var(--gold-deep);
  background:color-mix(in srgb,var(--gold-hi) 10%,var(--panel-2));
}
.ab-open:active{transform:translateY(1px)}
.ab-open:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.ab-open .ab-toggle{pointer-events:none}
.ab-open:hover .ab-toggle{background:transparent}
.ab-open .ab-chev{transform:none}
.ability-ench-mark{
  position:absolute;
  left:62px;
  top:44px;
  color:var(--verdigris);
  font-family:var(--font-display);
  font-size:var(--fs-label);
  font-weight:700;
}

dialog.ability-dialog{width:min(50rem,calc(100vw - 1.4rem))}
.ability-dialog-vitals{
  display:grid;
  place-items:center;
  min-height:104px;
  margin-bottom:var(--s3);
  border-block:1px solid var(--rule-soft);
  background:color-mix(in srgb,var(--gold-hi) 7%,transparent);
}
.ability-dialog-orbs{position:relative;width:98px;height:84px}
.ability-dialog-orbs .orb-set{left:0;margin-left:0;top:3px}
.ability-dialog-rows{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s5);
  align-content:start;
}
.ability-dialog-rows .ab-row--save{grid-column:1/-1}
.ability-dialog-rows .ab-row{padding-inline:var(--s1)}
.ability-dialog-rows .ab-none{grid-column:1/-1}
.ability-passive-value{
  min-width:34px;
  text-align:right;
  font-family:var(--font-display);
  color:var(--gold-deep);
}
.ability-dialog .rules-close{margin-top:var(--s4)}

@media (max-width:560px){
  .ab-open{min-height:164px;padding-inline:var(--s1)}
  .ability-dialog .rules-inner{padding:var(--s4)}
  .ability-dialog-rows{grid-template-columns:1fr}
  .ability-dialog-rows .ab-row--save{grid-column:auto}
}

@media (max-width:340px){
  .ab-grid{grid-template-columns:1fr 1fr}
  .ab-open{min-height:154px}
  .ab-name{letter-spacing:.04em}
}