/* compat-tool */
.compat-form { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: end; }
.compat-form .btn { width: 100%; }
@media (min-width: 720px) { .compat-form { grid-template-columns: 2fr 1fr 1fr auto; } .compat-form .btn { width: auto; } }
.compat-choices, .compat-list, .compat-evidence { list-style: none; margin: 0; padding: 0; }
.compat-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.compat-choices .pill { white-space: normal; padding: 6px 12px; }
.compat-list { display: grid; gap: 12px; }
.compat-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.compat-item p { margin: 0; }
.compat-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.compat-mpn { font-weight: 600; overflow-wrap: anywhere; }
.compat-spec, .compat-count { color: var(--muted); font-size: 14px; }
.compat-title { color: var(--body); font-size: 15px; }
.compat-item .badge { white-space: normal; }
.compat-evidence { display: grid; gap: 4px; font-size: 14px; color: var(--body); overflow-wrap: anywhere; }
.compat-evidence li { padding-left: 14px; position: relative; }
.compat-evidence li::before { content: "\2022"; position: absolute; left: 0; }
.compat-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.compat-note { max-width: 760px; }

/* poe-tool */
.poe-form [hidden], .poe-result [hidden] { display: none !important; }
.poe-fieldset { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 16px; display: grid; gap: 16px; min-width: 0; }
.poe-fieldset legend { padding: 0 6px; }
.poe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.poe-row:last-child { border-bottom: 0; padding-bottom: 0; }
.poe-row .field:first-child { grid-column: 1 / -1; }
.poe-remove { justify-self: start; }
.poe-opts { max-width: 220px; }
.poe-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin: 0; }
.poe-totals > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px; }
.poe-totals dt { color: var(--muted); font-size: 14px; }
.poe-totals dd { margin: 4px 0 0; font-size: 26px; font-weight: 600; color: var(--ink); }
.poe-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.poe-matches li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 12px 16px; }
@media (min-width: 720px) {
  .poe-row { grid-template-columns: 2fr 2fr 1fr 1fr auto; }
  .poe-row .field:first-child { grid-column: auto; }
}

/* poe-tool: example presets reuse .chip (a part-number style), so let long labels wrap */
.poe-presets .chip {
  font-family: inherit;
  white-space: normal;
  text-align: left;
  height: auto;
  max-width: 100%;
}
.compat-closest, .compat-lead { border-left: 4px solid var(--amber); background: var(--amber-soft); padding: 12px 16px; border-radius: 4px; margin: 0; }
.compat-lead p { margin: 0; }
details.compat-group > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 8px; }
details.compat-group[open] > summary { margin-bottom: 12px; }
.compat-why > summary { cursor: pointer; font-size: 14px; color: var(--muted); min-height: 32px; }
.compat-more { color: var(--muted); font-size: 14px; }