/* item-detail.css — shared item location section & tag styles
   Loaded by: index.html, hints.html, collection.html, views/updatehints.html
   Edit here to update all pages at once. */

.section { margin-top: 6px; }
.section-label {
  font-size: 11px; color: #8a7a50; margin-bottom: 3px;
  display: flex; align-items: center; gap: 5px;
}
.section-rows  { display: flex; flex-direction: column; gap: 1px; }
.section-row   { color: #b0a888; line-height: 1.4; font-size: 11px; }
.section-row .sub { color: #666; font-size: 11px; }

.tag { display: inline-block; border-radius: 3px; padding: 0 4px; font-size: 10px; margin-right: 3px; vertical-align: middle; }
.tag.market  { background: #1e3020; color: #60c080; border: 1px solid #2a5030; }
.tag.vendor  { background: #20201e; color: #c0b060; border: 1px solid #40381e; }
.tag.barter  { background: #20201e; color: #a080c0; border: 1px solid #38285a; }
.tag.duty    { background: #201820; color: #c070c0; border: 1px solid #502050; }
.tag.gc      { background: #1e2030; color: #6090d0; border: 1px solid #283860; }
.tag.craft   { background: #202020; color: #909090; border: 1px solid #383838; }
.tag.quest   { background: #201e10; color: #c0a040; border: 1px solid #4a3a10; }
.tag.achieve { background: #201818; color: #c06040; border: 1px solid #503020; }

.detail-links { display: flex; gap: 14px; padding: 8px 0 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Dye subtitle injected into card header name element */
.m-name.has-sub, .item-name.has-sub {
  display: flex; flex-direction: column; gap: 1px;
  overflow: visible; white-space: normal;
  -webkit-line-clamp: unset;
}
.item-sub { font-size: 10px; line-height: 1.2; }
.item-sub-family { color: #9a9080; }
.item-sub-sep { color: #555; }
.item-sub-spectrum { color: #7a6840; }
.detail-link { display: inline-flex; align-items: center; gap: 5px; color: #b0a070; text-decoration: none; font-size: 12px; }
.detail-link:hover { color: #d4c080; text-decoration: underline; }
.detail-link img { width: 14px; height: 14px; border-radius: 2px; }