/* 宝石资料 · follows production.css (tables) and site.css (tokens) */
.jewelry-heading { margin-bottom: 18px; }
.jewelry-heading-links { display: flex; gap: 20px; justify-content: flex-end; font-size: 12px; white-space: nowrap; }

/* part toggle: CSS-only radios, so the switch also works without JavaScript */
.jewelry-slot-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jewelry-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px;
  padding: 12px 16px; margin-bottom: 18px; background: rgba(255, 255, 255, 0.97); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(25, 43, 34, 0.05); }
.jewelry-slots { display: flex; align-items: center; gap: 4px; }
.jewelry-slots > span { margin-right: 6px; font-size: 11px; color: #6d7d74; }
.jewelry-slots label { padding: 6px 14px; border: 1px solid #d3ddd6; border-radius: 16px; background: #fff; color: #415b60; font-size: 13px; cursor: pointer; user-select: none; }
.jewelry-slots label:hover { background: #eff3ed; }
#slot-weapon:checked ~ .jewelry-app [data-slot-label="weapon"],
#slot-armour:checked ~ .jewelry-app [data-slot-label="armour"],
#slot-accessory:checked ~ .jewelry-app [data-slot-label="accessory"] { background: #345f68; border-color: #345f68; color: #fff; }
#slot-weapon:focus-visible ~ .jewelry-app [data-slot-label="weapon"],
#slot-armour:focus-visible ~ .jewelry-app [data-slot-label="armour"],
#slot-accessory:focus-visible ~ .jewelry-app [data-slot-label="accessory"] { outline: 3px solid rgba(23, 107, 74, 0.35); outline-offset: 2px; }
.jewelry-tabs { display: flex; gap: 4px; }
.jewelry-tabs a { padding: 6px 10px; border-radius: 4px; color: #415b60; font-size: 13px; }
.jewelry-slots > span, .jewelry-slots label, .jewelry-tabs a { white-space: nowrap; }
.jewelry-tabs a:hover { background: #eff3ed; text-decoration: none; }
.jewelry-tabs small { color: #8b988e; font-size: 11px; }
.jewelry-search { flex: 1 1 220px; }
.jewelry-search input { width: 100%; min-height: 34px; padding: 6px 11px; border: 1px solid #cbd5cf; border-radius: 8px; background: #fbfcfb; font: inherit; font-size: 13px; }
.jewelry-search input:focus { outline: 3px solid rgba(23, 107, 74, 0.16); border-color: var(--accent); }
.jewelry-count { font-size: 11px; color: #78867e; white-space: nowrap; }
.jewelry-update { margin: -8px 0 16px; padding: 10px 14px; border: 1px solid #e5d3a8; border-radius: 8px; background: #fbf5e6; font-size: 13px; color: #6f5412; }

/* sections and tables */
.jewelry-section { margin-bottom: 30px; scroll-margin-top: 80px; }
.jewelry-section-heading { display: flex; align-items: baseline; gap: 20px; margin: 0 0 12px; }
.jewelry-section-heading h2 { margin: 0; font-size: 20px; white-space: nowrap; }
.jewelry-section-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.jewelry-table-wrap { border: 1px solid #dce2dc; border-radius: 6px; overflow: auto; background: #fff; margin-bottom: 16px; }
.jewelry-table { border-collapse: collapse; width: 100%; margin: 0; font-size: 12px; }
.jewelry-table caption { caption-side: top; text-align: left; padding: 9px 12px; background: #f6f6ee; color: #61715a; font-size: 12px; font-weight: 600; border-bottom: 1px solid #e6ebe4; }
.jewelry-table thead { background: #edf1ec; color: #5b7166; }
.jewelry-table th, .jewelry-table td { padding: 8px 10px; border-bottom: 1px solid #e6ebe4; border-right: 1px solid #f0f3ef; vertical-align: top; text-align: left; }
.jewelry-table thead th { font-size: 12px; font-weight: 600; white-space: nowrap; }
.jewelry-table tbody th[scope="row"] { width: 128px; background: #fafbf8; font-weight: 400; white-space: nowrap; }
.jewelry-table tbody th b { display: inline-block; min-width: 22px; color: #345f68; font: 600 13px/1.4 Georgia, serif; }
.jewelry-table tbody th small { color: #7c897f; font-size: 11px; }
.jewelry-table td[data-jewel] { min-width: 92px; cursor: pointer; }
.jewelry-table td[data-jewel]:hover, .jewelry-table tr[data-jewel]:hover { background: #f4f8f3; }
.jewelry-table [data-jewel]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jewelry-table .jewel-empty { color: #c3cbc4; text-align: center; }
.fx, .fx-all { line-height: 1.55; }
.fx span { display: block; white-space: nowrap; }
.fx-all { white-space: normal; }
.fx-all span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.jewelry-list .jewel-desc, .jewelry-list .jewel-ids, .jewelry-list tbody th[scope] { white-space: normal; }
.jewelry-list td.col-weapon, .jewelry-list td.col-armour, .jewelry-list td.col-accessory { min-width: 150px; max-width: 230px; }
.jewel-none { color: #aab3ab; }
.jewelry-app .fx { display: none; }
#slot-weapon:checked ~ .jewelry-app .fx-weapon,
#slot-armour:checked ~ .jewelry-app .fx-armour,
#slot-accessory:checked ~ .jewelry-app .fx-accessory { display: block; }

/* list tables (special / family): all three parts shown, the selected one highlighted */
.jewelry-list tbody + tbody { border-top: 2px solid #e2e8e1; }
.jewelry-list tbody th[scope="row"], .jewelry-list tbody th[scope="rowgroup"] { width: 170px; white-space: normal; }
.jewelry-list th strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; }
.jewelry-list th small { display: block; margin-top: 2px; }
.jewelry-list .jewel-level { width: 44px; text-align: center; color: #345f68; font: 600 13px/1.4 Georgia, serif; }
.jewelry-list .jewel-desc { max-width: 280px; color: #5f6d65; line-height: 1.6; }
.jewelry-list .jewel-ids { max-width: 220px; color: #7c897f; font-size: 11px; line-height: 1.6; }
#slot-weapon:checked ~ .jewelry-app .col-weapon,
#slot-armour:checked ~ .jewelry-app .col-armour,
#slot-accessory:checked ~ .jewelry-app .col-accessory { background: #eef5f1; }
#slot-weapon:checked ~ .jewelry-app thead .col-weapon,
#slot-armour:checked ~ .jewelry-app thead .col-armour,
#slot-accessory:checked ~ .jewelry-app thead .col-accessory { background: #345f68; color: #fff; }

/* live search */
.jewelry-app.searching [data-jewel]:not(.match) { opacity: 0.22; }
.jewelry-app.searching [data-jewel].match { background: #fff8df; }
.jewelry-app.searching .jewelry-table-wrap:not(.has-match) { display: none; }
.jewelry-app.searching .jewelry-list tbody:not(.has-match) { display: none; }
.jewelry-app.searching .jewelry-section:not(.has-match) { display: none; }

/* detail card */
.jewelry-detail { position: fixed; right: 24px; bottom: 24px; z-index: 20; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  padding: 18px 20px 16px; background: #fff; border: 1px solid #cfd9d2; border-radius: 12px; box-shadow: 0 18px 50px rgba(25, 43, 34, 0.18); }
.jewelry-detail h3 { margin: 0 28px 4px 0; font-size: 17px; }
.jewelry-detail-meta { margin: 0 0 12px; color: #7c897f; font-size: 12px; }
.jewelry-detail dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: 13px; }
.jewelry-detail dt { color: #5b7166; white-space: nowrap; }
.jewelry-detail dd { margin: 0; line-height: 1.55; }
.jewelry-detail dd span { display: inline-block; margin-right: 8px; }
.jewelry-detail-desc { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #edf0ed; color: #5f6d65; font-size: 12px; line-height: 1.7; }
.jewelry-detail-desc:empty { display: none; }
.jewelry-detail-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: #7c897f; font-size: 22px; line-height: 1; cursor: pointer; }
.jewelry-detail-close:hover { color: var(--ink); }

.jewelry-footnote, .jewelry-snapshot { margin: 6px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }

@media (max-width: 760px) {
  .jewelry-heading-links { justify-content: flex-start; }
  .jewelry-toolbar { position: static; }
  .jewelry-section-heading { display: block; }
  .jewelry-section-heading p { margin-top: 4px; }
  .jewelry-table tbody th[scope="row"] { width: auto; }
  .jewelry-table tbody th[scope="row"] small { display: block; }
  .jewelry-slots label { padding: 5px 10px; font-size: 12px; }
  .jewelry-tabs { max-width: 100%; overflow-x: auto; }
  .jewelry-detail { right: 16px; bottom: 16px; }
}
@media print {
  .jewelry-toolbar, .jewelry-detail, .jewelry-update { display: none !important; }
}