/* Unit reference consumes the current Compendium graphite palette and the
   canonical Panel/engraved patterns. All adaptations stay on this page. */
.unit-statistics.compendium-shell { width: min(1680px, 100%); margin: 0 auto; padding: 1.5rem clamp(1rem, 3vw, 3rem) 4rem; }
.unit-statistics { --surface-panel-strong: var(--cb-panel-fill); color: var(--site-text); }
.unit-statistics .unit-page-heading { padding: .75rem 0 1rem; }
.unit-statistics .compendium-hero-copy { flex: 1 1 auto; gap: .4rem; width: auto; min-width: 0; }
.unit-statistics .compendium-hero-copy::after { display: none; }
.unit-page-subtitle { margin: 0; color: var(--site-text-muted); font-size: 1rem; }
.unit-tree-launch { display: grid; flex: none; justify-items: center; gap: .2rem; margin-right: 28px; color: var(--site-gold); font-family: var(--site-font-title); font-size: .77rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: color var(--cb-ease), text-shadow var(--cb-ease); }
.unit-statistics .unit-tree-launch .compendium-tech-tree-medallion { grid-area: auto; }
.unit-tree-launch:hover, .unit-tree-launch:focus-visible { color: var(--site-gold-strong); text-shadow: 0 0 9px rgba(232,196,111,.55); }
.unit-tree-launch:hover .compendium-tech-tree-medallion, .unit-tree-launch:focus-visible .compendium-tech-tree-medallion { filter: brightness(1.14) saturate(1.06) drop-shadow(0 0 8px rgba(213,177,101,.4)); transform: translateY(-1px); }
.unit-tree-launch:focus-visible { outline: 2px solid var(--site-gold-strong); outline-offset: 5px; border-radius: var(--site-radius-sm); }
.unit-context-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem 1rem; margin: .7rem 0 1rem; }
.unit-source { color: var(--site-text-muted); font-size: .86rem; margin: 0; }
.unit-help-control { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .75rem .3rem .35rem; border: 1px solid var(--cb-card-border); border-radius: var(--site-radius-sm); background: var(--cb-card-fill); color: var(--site-text); font-family: var(--site-font-title); font-size: .94rem; text-decoration: none; transition: background var(--cb-ease), border-color var(--cb-ease); }
.unit-help-control img { width: 34px; height: 34px; object-fit: contain; }
.unit-help-control:hover, .unit-help-control:focus-visible { background: var(--cb-card-fill-hover); border-color: var(--cb-card-border-hover); color: var(--site-gold-strong); }
.unit-filters { padding: .85rem 1rem; display: grid; grid-template-columns: minmax(190px, 1.7fr) minmax(125px, 1.1fr) repeat(5, minmax(95px, 1fr)) repeat(2, minmax(95px, .7fr)); align-items: end; gap: .7rem .8rem; overflow: visible; position: relative; z-index: 4; }
.unit-filters label, .unit-filter-field, .unit-search { display: grid; gap: .3rem; font-size: .82rem; min-width: 0; }
.unit-filter-label { display: flex; align-items: center; gap: .2rem; min-height: 19px; }
.unit-filter-label label { display: inline; }
.unit-info-button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 1px; border: 0; background: transparent; cursor: help; }
.unit-info-button img { width: 18px; height: 18px; object-fit: contain; }
.unit-filters .unit-search { position: relative; align-self: end; }
.unit-filters input, .unit-filters select { width: 100%; height: 38px; padding: .4rem .5rem; color: var(--site-text); background: var(--cb-field-fill); border: 1px solid var(--site-border-strong); border-radius: var(--site-radius-sm); font: inherit; }
 .unit-filter-actions { display: flex; justify-content: center; gap: .75rem; padding-top: .65rem; }
.unit-statistics .unit-filter-actions .unit-primary-action { background: rgba(213,177,101,.17); border-color: var(--site-gold); color: var(--site-gold-strong); padding-inline: 1.5rem; }
.unit-statistics .unit-filter-actions .unit-primary-action:hover { background: rgba(213,177,101,.24); }
.unit-table-toolbar { align-items: center; }
.unit-view-controls { display: flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.unit-view-controls .site-action-link { padding: .35rem .7rem; font-size: .72rem; min-height: 32px; }
.unit-statistics .unit-view-controls .site-action-link[aria-pressed="true"] { background: linear-gradient(180deg, #967746, #694d2c); border-color: #e8c46f; color: #fff4d8; box-shadow: inset 0 1px rgba(255,244,216,.3), 0 0 0 1px rgba(232,196,111,.25), 0 2px 8px rgba(0,0,0,.3); font-weight: 700; }
.unit-statistics .unit-view-controls .site-action-link[aria-pressed="true"]:hover, .unit-statistics .unit-view-controls .site-action-link[aria-pressed="true"]:focus-visible { background: linear-gradient(180deg, #a4834d, #735432); border-color: #f4d895; color: #fff8e8; }
.unit-page-size { display: flex; gap: .4rem; align-items: center; }
.unit-page-size select { color: var(--site-text); background: var(--cb-field-fill); border: 1px solid var(--cb-card-border); border-radius: var(--site-radius-sm); padding: .3rem; font: inherit; }
.unit-pagination { display: flex; align-items: center; gap: .5rem; font-size: .75rem; white-space: nowrap; }
.unit-pagination .site-action-link { padding: .3rem .5rem; min-height: 30px; font-size: .68rem; }
.unit-pagination [aria-disabled] { opacity: .4; }
.unit-page-select { display: inline-flex; align-items: center; gap: .35rem; }
.unit-page-select select { min-width: 3.3rem; height: 30px; padding: .2rem .3rem; color: var(--site-text); background: var(--cb-field-fill); border: 1px solid var(--cb-card-border); border-radius: var(--site-radius-sm); font: inherit; }
.unit-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-top: 1px solid var(--cb-row-rule); flex-wrap: wrap; }
.unit-table-footer .unit-heat-key { border: 0; padding: 0; margin-left: auto; }
@media (max-width: 1250px) { .unit-filters { grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(115px, 1fr)); } }
@media (max-width: 750px) { .unit-filters { grid-template-columns: repeat(2, minmax(0,1fr)); } .unit-filters .unit-search { grid-column: 1 / -1; grid-row: auto; } }

.unit-statistics .site-action-link { background: var(--cb-card-fill); border-color: var(--cb-card-border); }
.unit-statistics .site-action-link:hover, .unit-statistics .site-action-link:focus-visible { background: var(--cb-card-fill-hover); border-color: var(--cb-card-border-hover); }
.unit-suggestions { position: absolute; top: calc(100% + 6px); left: 0; width: min(500px, calc(100vw - 4rem)); max-height: min(400px, 55vh); overflow-y: auto; padding: .4rem; background: #191a1b; border: 1px solid var(--cb-card-border-hover); border-radius: var(--site-radius-sm); box-shadow: var(--site-shadow-menu); }
.unit-suggestion { display: flex; align-items: center; gap: .3rem; border-bottom: 1px solid var(--cb-row-rule); }
.unit-suggestion .unit-identity-button { flex: 1; min-width: 0; }
.unit-suggestion:last-child { border-bottom: 0; }
.unit-search-empty { padding: .5rem; }
.unit-compare-tray { margin: 1rem 0; padding: .8rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.unit-compare-tray p { margin: .2rem 0 0; font-size: .82rem; color: var(--site-text-muted); }
.unit-compare-tray [data-selected-units] { display: flex; flex: 1 1 300px; flex-wrap: wrap; gap: .4rem; }
.unit-compare-tray button:disabled { opacity: .5; cursor: default; }
.unit-tray-chip { display: flex; align-items: center; border: 1px solid var(--cb-card-border); border-radius: var(--site-radius-sm); background: var(--cb-card-fill); }
.unit-tray-chip .unit-identity-button { padding: .35rem; }
.unit-tray-chip img { width: 28px; height: 28px; }
.unit-tray-chip small { font-size: .65rem; }
.unit-remove { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; background: transparent; border: 0; border-left: 1px solid var(--cb-row-rule); padding: .4rem; cursor: pointer; }
.unit-remove img, .unit-tray-chip .unit-remove img { display: block; width: 22px; height: 22px; object-fit: contain; }
.unit-remove:hover, .unit-remove:focus-visible { background: var(--cb-card-fill-hover); }
.unit-remove:focus-visible, .unit-add:focus-visible { outline: 2px solid var(--site-gold-strong); outline-offset: 2px; }
.unit-matrix-remove { margin-top: .3rem; border-left: 0; border-radius: var(--site-radius-sm); }
.unit-focused { margin-bottom: 1.5rem; }
.unit-statistics .ps-panel--engraved > .ps-band { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; letter-spacing: .06em; background: linear-gradient(180deg, #28292b, #1d1e20); }
.unit-table-scroll { overflow: auto; max-height: 75vh; }
.unit-statistics .ps-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.unit-statistics .ps-table thead { position: sticky; top: 0; z-index: 2; background: #202123; }
.unit-statistics .unit-stat-table thead th { position: sticky; top: 0; z-index: 3; box-shadow: 0 1px 0 var(--cb-row-rule), 0 4px 8px rgba(0,0,0,.18); }
.unit-statistics .ps-table.unit-stat-table thead th:first-child { left: 0; z-index: 4; }
.unit-statistics .ps-table th, .unit-statistics .ps-table td { padding: .55rem .65rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .88rem; }
.unit-statistics .ps-table th { background: #202123; }
.unit-statistics .ps-table thead a { text-decoration: none; color: var(--site-gold); }
.unit-statistics .ps-table thead a[data-sort="los"], .unit-statistics .unit-matrix th[data-metric="los"] { text-transform: none; }
.unit-statistics .ps-table tbody th { border-bottom: 1px solid var(--cb-row-rule); font-weight: normal; }
.unit-statistics .ps-table th:first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: #1b1c1e; min-width: 235px; }
.unit-statistics .ps-table thead th:first-child { z-index: 3; }
.unit-identity-button { display: flex; align-items: center; gap: .55rem; max-width: 100%; padding: .25rem; color: var(--site-gold-strong); background: transparent; border: 1px solid transparent; border-radius: var(--site-radius-sm); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.unit-identity-button:hover, .unit-identity-button:focus-visible { background: var(--cb-card-fill-hover); border-color: var(--cb-card-border-hover); }
.unit-identity-button strong { font-family: var(--site-font-title); font-size: .84rem; font-weight: 700; }
.unit-identity-button img { object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.unit-identity-button small { display: block; color: var(--site-text-muted); font-family: var(--site-font-body); font-size: .72rem; white-space: normal; }
.unit-add { display: inline-flex; align-items: center; justify-content: center; margin-top: .2rem; width: 38px; height: 38px; padding: 4px; border: 1px solid transparent; border-radius: var(--site-radius-sm); background: transparent; cursor: pointer; vertical-align: middle; }
.unit-add:hover, .unit-add:focus-visible { background: var(--cb-card-fill-hover); border-color: var(--cb-card-border-hover); }
.unit-add img { display: none; width: 30px; height: 30px; object-fit: contain; }
.unit-add:not([aria-pressed="true"]) .unit-icon-add, .unit-add[aria-pressed="true"] .unit-icon-remove { display: block; }
.unit-add:not([aria-pressed="true"]):is(:hover, :focus-visible) .unit-icon-add, .unit-add[aria-pressed="true"]:is(:hover, :focus-visible) .unit-icon-remove { display: none; }
.unit-add:not([aria-pressed="true"]):is(:hover, :focus-visible) .unit-icon-add-hover, .unit-add[aria-pressed="true"]:is(:hover, :focus-visible) .unit-icon-remove-hover { display: block; }
.unit-details { margin-top: .3rem; font-size: .7rem; color: var(--site-text-muted); max-width: 310px; white-space: normal; }
.unit-details summary { margin: -.1rem -.25rem; padding: .2rem .25rem; border-radius: var(--site-radius-sm); color: var(--site-text); cursor: pointer; transition: background var(--cb-ease), color var(--cb-ease); }
.unit-details summary:hover, .unit-details summary:focus-visible { background: var(--cb-card-fill-hover); color: var(--site-gold-strong); }
.unit-details p { margin: .4rem 0; overflow-wrap: anywhere; }
.unit-statistics .ps-table td.unit-heat-high { background: rgba(104,150,121,.23); color: var(--site-text); }
.unit-statistics .ps-table td.unit-heat-low { background: rgba(164,106,104,.23); color: var(--site-text); }
.unit-heat-key { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; padding: .75rem 1rem; border-top: 1px solid var(--cb-row-rule); color: var(--site-text-muted); font-size: .82rem; }
.unit-heat-key strong { color: var(--site-text); font-size: .85rem; }
.unit-heat-key small { font-size: .78rem; }
.unit-heat-key > div { display: flex; align-items: center; gap: .5rem; }
.unit-heat-ramp { width: 100px; height: 10px; border: 1px solid var(--cb-row-rule); border-radius: 3px; background: linear-gradient(90deg, rgba(164,106,104,.5), #202123 50%, rgba(104,150,121,.5)); }
.unit-statistics .unit-matrix { table-layout: auto; min-width: 100%; width: max-content; }
.unit-statistics .unit-matrix th:first-child { width: 235px; }
.unit-statistics .unit-matrix th:not(:first-child), .unit-statistics .unit-matrix td:not(:first-child) { min-width: 190px; }
.unit-statistics .unit-matrix td, .unit-statistics .unit-matrix th { white-space: normal; overflow-wrap: anywhere; }
.unit-matrix-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.unit-matrix-heading .unit-identity-button { min-width: 0; }
.unit-matrix-heading .unit-matrix-remove { flex: none; margin: 0; }
.unit-matrix .unit-identity-button strong { font-size: .8rem; }
.unit-max-value { padding: .1rem .2rem; border: 0; border-bottom: 1px dotted currentColor; background: transparent; color: inherit; font: inherit; cursor: help; }
.unit-max-tooltip { position: fixed; inset: auto; margin: 0; width: max-content; max-width: min(340px, calc(100vw - 16px)); max-height: min(440px, calc(100dvh - 16px)); overflow-y: auto; padding: .75rem; border: 1px solid var(--site-border-strong); border-radius: var(--site-radius-sm); background: #202123; color: var(--site-text); box-shadow: var(--site-shadow-menu); font-family: var(--site-font-body); font-size: .88rem; text-align: left; white-space: normal; z-index: 20; }
.unit-max-tooltip:not(:popover-open):not(.is-visible) { display: none; }
.unit-max-tooltip.is-visible { display: block; }
.unit-max-tooltip strong { display: block; color: var(--site-gold); }
.unit-max-tooltip p { margin: .35rem 0 0; color: var(--site-text); line-height: 1.45; }
.unit-max-tooltip a { color: var(--site-gold-strong); }
.unit-max-case { display: grid; gap: .15rem; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--cb-row-rule); }
.unit-max-case strong { color: var(--site-gold); }
.unit-max-tooltip small { display: block; color: var(--site-text-muted); font-size: .75rem; }
.unit-guide { margin-top: 1.5rem; padding: 1rem 1.3rem; }
.unit-guide summary { font-family: var(--site-font-title); color: var(--site-gold); cursor: pointer; }
.unit-guide-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.5rem; margin-top: 1rem; }
.unit-guide h3 { margin: 0 0 .3rem; color: var(--site-gold); font-family: var(--site-font-title); font-size: .95rem; }
.unit-guide p { color: var(--site-text); line-height: 1.5; }
.unit-guide-topics p { margin: 0; }
.unit-guide dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.unit-guide dt { color: var(--site-gold); font-weight: 700; }
.unit-guide dd { margin: .3rem 0 0; color: var(--site-text); line-height: 1.45; }
.unit-guide .unit-guide-note { color: var(--site-text-muted); }
.unit-guide code { overflow-wrap: anywhere; }
.unit-statistics :focus-visible { outline: 2px solid var(--site-gold); outline-offset: 3px; }
.unit-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 980px) { .unit-statistics .unit-page-heading { grid-template-areas: "copy tree"; } .unit-statistics .unit-tree-launch { grid-area: tree; margin-right: 0; } }
@media (max-width: 600px) {
  .unit-statistics.compendium-shell { padding-top: 1rem; }
  .unit-guide dl, .unit-guide-topics { grid-template-columns: 1fr; }
  .unit-statistics .ps-table th:first-child { min-width: 185px; max-width: 210px; }
  .unit-identity-button { gap: .35rem; }
  .unit-identity-button strong { white-space: normal; }
  .unit-filters label { flex-basis: 130px; }
  .unit-source { overflow-wrap: anywhere; }
  .unit-compare-tray [data-selected-units] { flex-basis: 100%; }
  .unit-heat-key { padding-inline: .6rem; font-size: .68rem; }
  .unit-heat-ramp { width: 65px; }
}
