/* UI 017.3B.4.5.1 — Character final RPG polish + attribute/source readability.
   Scoped to isolated Character only. Preserves accepted B.4.3.1/B.4.4 geometry. */

#i173a-character-layer .i173b4-expandable,
#i173a-character-layer .i173b4-attribute-expandable,
#i173a-character-layer .i173b44-sources-more{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

#i173a-character-layer .i173b4-detail-head > div{
  min-width:0;
}

#i173a-character-layer .i173b4-detail-head h4,
#i173a-character-layer .i173b4-detail-description,
#i173a-character-layer .i173b4-server-note,
#i173a-character-layer .i173b44-context{
  overflow-wrap:anywhere;
}

#i173a-character-layer .i173b4-detail-description,
#i173a-character-layer .i173b4-server-note,
#i173a-character-layer .i173b44-context{
  text-wrap:pretty;
}

#i173a-character-layer .i173b4-detail-value{
  max-width:46%;
  overflow-wrap:anywhere;
}

/* B.4.5.1 readability: primary attributes should read with the same visual
   confidence as combat stats, without changing accepted card geometry. */
#i173a-character-layer .i173b3-attribute-name{
  font-size:12.5px;
  line-height:1.22;
}

#i173a-character-layer .i173b3-breakdown{
  font-size:10.4px;
  line-height:1.38;
}

#i173a-character-layer .i173b4-attribute-detail .i173b4-detail-kicker,
#i173a-character-layer .i173b4-attribute-detail .i173b4-sources-title{
  font-size:10.4px;
}

#i173a-character-layer .i173b4-attribute-detail .i173b4-detail-description{
  font-size:11.8px;
  line-height:1.52;
}

#i173a-character-layer .i173b4-attribute-detail .i173b4-breakdown-card > span{
  font-size:10.4px;
}

#i173a-character-layer .i173b4-attribute-detail .i173b4-fact > span,
#i173a-character-layer .i173b4-sources .i173b4-fact > span{
  font-size:11.2px;
  line-height:1.42;
}

#i173a-character-layer .i173b4-attribute-detail .i173b4-fact > strong,
#i173a-character-layer .i173b4-sources .i173b4-fact > strong{
  font-size:12.3px;
  line-height:1.42;
}

#i173a-character-layer .i173b44-source-count{
  font-size:9.6px;
}

#i173a-character-layer .i173b44-sources-more{
  font-size:11.3px;
}

#i173a-character-layer .i173b4-attribute-detail .i173b4-server-note{
  font-size:10.4px;
  line-height:1.5;
}

#i173a-character-layer .i173b44-affects-label{
  font-size:10.8px;
}

#i173a-character-layer .i173b44-affects-chip{
  font-size:10.9px;
}

#i173a-character-layer .i173b4-fact{
  transition:background-color .16s ease,border-color .16s ease;
}

#i173a-character-layer .i173b4-sources .i173b4-fact{
  border:1px solid transparent;
}

#i173a-character-layer .i173b4-sources .i173b4-fact:active{
  border-color:rgba(207,164,83,.10);
  background:rgba(255,255,255,.026);
}

#i173a-character-layer .i173b4-sources-title{
  min-width:0;
}

#i173a-character-layer .i173b44-source-count{
  white-space:nowrap;
}

#i173a-character-layer .i173b44-sources-more{
  user-select:none;
  -webkit-user-select:none;
}

#i173a-character-layer .i173b4-detail,
#i173a-character-layer .i173b3-combat-card.i173b4-expandable,
#i173a-character-layer .i173b3-attribute.i173b4-attribute-expandable{
  scroll-margin-block:12px 104px;
}

#i173a-character-layer .i173b3-combat-card.i173b4-expandable:active,
#i173a-character-layer .i173b3-attribute.i173b4-attribute-expandable:active{
  border-color:rgba(218,174,91,.30);
}

@media (max-width:380px){
  #i173a-character-layer .i173b3-attribute-name{font-size:12px}
  #i173a-character-layer .i173b3-breakdown{font-size:10px}
  #i173a-character-layer .i173b4-attribute-detail .i173b4-detail-kicker,
  #i173a-character-layer .i173b4-attribute-detail .i173b4-sources-title{font-size:10px}
  #i173a-character-layer .i173b4-attribute-detail .i173b4-detail-description{font-size:11.3px}
  #i173a-character-layer .i173b4-attribute-detail .i173b4-fact > span,
  #i173a-character-layer .i173b4-sources .i173b4-fact > span{font-size:10.8px}
  #i173a-character-layer .i173b4-attribute-detail .i173b4-fact > strong,
  #i173a-character-layer .i173b4-sources .i173b4-fact > strong{font-size:11.8px}
  #i173a-character-layer .i173b44-sources-more{font-size:11px}
  #i173a-character-layer .i173b4-attribute-detail .i173b4-server-note{font-size:10px}
}

@media (max-width:340px){
  #i173a-character-layer .i173b4-detail-head{
    align-items:flex-start;
    gap:8px;
  }

  #i173a-character-layer .i173b4-detail-head h4{
    font-size:16px;
  }

  #i173a-character-layer .i173b4-detail-value{
    max-width:42%;
    font-size:23px;
  }

  #i173a-character-layer .i173b4-fact{
    grid-template-columns:minmax(0,1fr);
    gap:3px;
  }

  #i173a-character-layer .i173b4-fact > strong{
    text-align:left;
  }

  #i173a-character-layer .i173b44-affects{
    align-items:flex-start;
  }

  #i173a-character-layer .i173b44-affects-chips{
    width:100%;
    justify-content:flex-start;
  }
}

/* The Character shell intentionally remains narrow on iPad. Keep equipment-source
   rows single-column there so long item names do not become cramped two-column rows. */
@media (min-width:760px){
  #i173a-character-layer .i173b4-sources{
    grid-template-columns:minmax(0,1fr);
  }

  #i173a-character-layer .i173b4-sources-title,
  #i173a-character-layer .i173b44-sources-more{
    grid-column:1;
  }

  #i173a-character-layer .i173b3-attribute-name{font-size:13px}
  #i173a-character-layer .i173b3-breakdown{font-size:10.8px}
}

html.arena-cool-mode #i173a-character-layer .i173b4-fact,
html[data-performance="cool"] #i173a-character-layer .i173b4-fact{
  transition:none;
}

@media (prefers-reduced-motion:reduce){
  #i173a-character-layer .i173b4-fact{
    transition:none!important;
  }
}
