/* =========================================
   Directory table readability pass
   Append to: /jp/directory/css/style.css
              /en/directory/css/style.css
   Scoped to .pa-enhanced so it only touches the
   directory table once directory-enhance.js has run.
============================================ */

.table.border.pa-enhanced td {
  vertical-align: top;
  overflow-wrap: anywhere; /* safety net for any long unbroken string in a
                              fixed-width column, not just the keyword chips */
}

.table.border.pa-enhanced thead th {
  font-weight: 500;
}

.table.border.pa-enhanced tbody tr:hover {
  background: #eef4fa;
}

.pa-name-main {
  display: block;
  font-weight: 700;
}

.pa-name-kana {
  display: block;
  font-size: 0.82em;
  font-weight: 400;
  color: #767676;
  margin-top: 2px;
}

.pa-role {
  font-size: 0.9em;
  margin-bottom: 2px;
  /* no color set — inherits body's color: #333 */
}

.pa-lab a {
  color: #0077bf;
}

.pa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0; /* table-layout:fixed gives the cell a hard width; without this,
                   flex's default min-width:auto stops the row from shrinking
                   and a long chip pushes the cell wider than the column */
}

.pa-chip {
  display: inline-block;
  max-width: 100%;
  font-size: 0.82em;
  line-height: 1.4;
  background: #e8e8e8;
  color: #333; /* body's color: #333 */
  padding: 1px 8px;
  border-radius: 100px;
  white-space: normal;      /* was nowrap — a long keyword can now wrap... */
  overflow-wrap: anywhere;  /* ...and break mid-word if it still doesn't fit */
}

/* multi-role rows (.column dl/dt/dd) reuse the same
   pa-role / pa-lab / pa-chips classes inside dt/dd */
.table.border.pa-enhanced .column dd .pa-chips {
  margin-top: 2px;
}