/* Social screens use the shared table kit and compact working-page heads. */
.concept-std .st-social-chips,
.concept-std .st-social-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.concept-std .st-segment.st-social-chips { width: fit-content; gap: 8px 2px; }
.concept-std .st-social-empire,
.concept-std .st-social-own { min-width: 0; overflow-wrap: anywhere; }
.concept-std .st-social-own { padding-inline-start: 0; }
.concept-std .st-social-npc { background: var(--st-badge); color: var(--st-badge-ink); padding: .05rem .25rem; margin-inline-start: .3rem; font-size: .75em; border-radius: .2rem; }
.concept-std .st-social-pin { display: inline; color: var(--st-you); font-size: .8em; }
.concept-std .st-social-standing { white-space: nowrap; }
.concept-std .st-social-standing--allied { color: var(--st-allied); }
.concept-std .st-social-standing--hostile { color: var(--st-hostile); }
.concept-std .st-social-standing--war { color: var(--st-war); }
.concept-std .st-social-standing--neutral { color: var(--st-neutral); }
.concept-std .st-social-standing--you { color: var(--st-you); }
.concept-std .st-social-position,
.concept-std .st-social-summary { padding: .6rem; background: var(--st-panel); border: 1px solid var(--st-line); }
.concept-std .st-social-position p,
.concept-std .st-social-summary p { margin: .35rem 0; }
.concept-std .st-social-crest { width: 48px; height: 48px; object-fit: contain; }
.concept-std .st-social-rooms { display: grid; gap: .5rem; color: var(--st-muted); }
@media (max-width: 1023px) { .concept-std .st-social-summary { display: none; } }
.concept-std .st-grid__row:has(.st-social-own) { background: var(--st-hover); }

.concept-std .st-grid__row:has(.st-social-own) > :first-child { box-shadow: inset 3px 0 var(--st-you); }
.concept-std .st-social-contacts .st-grid__table td { white-space: nowrap; }
@media (max-width: 1023px) {
  .concept-std .st-social-contacts .st-grid__table td:first-child { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}
.concept-std .st-social-contact-state { display: none; }
@media (max-width: 1023px) {
  .concept-std .st-social-contact-name { line-height: 12px; }
  .concept-std .st-social-contact-state { display: block; font-size: 10px; color: var(--st-muted); }
}

/* NPC attitude stays in the comparison table; Hail moves below it on a phone. */
.concept-std .st-grid td:has(.npc-attitude) { white-space: normal; }
.concept-std .npc-why summary { min-height: 44px; }
.concept-std .npc-attitude .npc-hail-button { min-height: 44px; }
@media (min-width: 1024px) {
  .concept-std .st-grid .npc-attitude > .npc-hail-button { display: none; }
}
@media (max-width: 600px) {
  .concept-std .st-grid:has(.npc-attitude) { font-size: 12px; }
}
/* A served disclosure needs its natural height, including inside a crest label. */
.concept-std .st-flair-cell:has(.npc-attitude) { height: auto; align-items: flex-start; }
.concept-std .st-flair-cell__label:has(.npc-attitude) { overflow: visible; }
.concept-std .st-grid__table tr:has(.npc-attitude) > * { height: auto; vertical-align: top; }
.concept-std .st-grid__table th:has(.npc-attitude),
.concept-std .st-grid__table td:has(.npc-attitude) { overflow: visible; white-space: normal; }
.concept-std .st-social-contact-name:has(.npc-attitude) { line-height: 1.4; }
#app.concept-std main.game-main .npc-hail-button,
#app.concept-std main.game-main .st-grid__table .npc-hail-button { height: auto; min-height: 32px; margin: 0; padding: 4px 10px; box-sizing: border-box; background-clip: border-box; }
@media (min-width: 1024px) {
  #app.concept-std main.game-main .st-grid .npc-attitude > .npc-hail-button { display: none; }
}

@media (min-width: 1024px) {
  .concept-std [data-table-key="diplomacy.standings"] .npc-attitude__band .npc-trend { display: none; }
}
@media (max-width: 1023px) {
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table { table-layout: fixed; width: 100%; }
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table th:first-child { width: 34%; }
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table thead th:nth-child(2),
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table thead th:nth-child(3) { width: 15%; }
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table td,
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table tbody th { padding: 4px; white-space: normal; vertical-align: top; }
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-flair-cell { height: auto; align-items: flex-start; }
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-flair-cell__label { white-space: normal; overflow-wrap: normal; }
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-social-standing { white-space: normal; }
}
@media (max-width: 600px) {
  .concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-flair-thumb { display: none; }
}

/* Full empire names wrap at spaces; each row follows its own contents. */
.concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table tbody tr { height: auto; }
.concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-grid__table tbody tr > * { height: auto; vertical-align: top; }
.concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-flair-cell { height: auto; width: 100%; align-items: flex-start; }
.concept-std [data-table-key="diplomacy.standings"]:has(.npc-attitude) .st-flair-cell__label { width: 100%; overflow: visible; white-space: normal; overflow-wrap: normal; word-break: normal; }
.concept-std [data-table-key="diplomacy.standings"] .npc-empire-name { display: block; min-width: 0; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
.concept-std [data-table-key="diplomacy.standings"] .npc-empire-name__text { white-space: normal; }
#app.concept-std main.game-main .npc-hail-button,
#app.concept-std main.game-main .st-grid__table .npc-hail-button { min-width: 52px; width: max-content; }
@media (max-width: 400px) {
  .concept-std [data-table-key="diplomacy.standings"] .npc-attitude { font-size: 11px; }
}