/* Compare: one column per yacht, row labels on the left, a small bar per number on the row's own scale. */

.cmp { margin-top: 32px; display: grid; }
.cmp-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); align-items: start; }
.cmp-row-head { border-top: 0; position: sticky; top: var(--header-h); z-index: 5; background: var(--paper); padding-top: 8px; }
.cmp-k { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); display: grid; }
.cmp-k small { font-weight: 500; color: var(--muted); }
.cmp-cells, .cmp-head { display: grid; gap: 20px; }
.cmp-c { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cmp-v { font-family: var(--serif); font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cmp-bar { display: block; height: 4px; width: var(--w); background: var(--sky); border-radius: 2px; }
.cmp-yacht { display: grid; gap: 4px; align-content: start; }
.cmp-photo { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--line); margin-bottom: 8px; }
.cmp-photo img { width: 100%; height: 100%; object-fit: cover; }
.cmp-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; text-decoration: none; }
.cmp-model { font-size: 0.8125rem; color: var(--muted); }
.cmp-yacht .btn-link { justify-self: start; font-size: 0.8125rem; }
.cmp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-tags li { padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600; }
.cmp-tags.is-shared li { background: var(--wash); border-color: transparent; }
.cmp-plan { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.cmp-plan img { width: 100%; height: 180px; object-fit: contain; }
.cmp-add { margin-top: 40px; max-width: 520px; display: grid; gap: 4px; position: relative; }
.cmp-find { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.cmp-find button { width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-raised); cursor: pointer; text-align: left; }
.cmp-find img, .cmp-find .fit-noimg { width: 64px; height: 46px; object-fit: cover; border-radius: 2px; background: var(--line); display: block; }
.cmp-find span { display: grid; }
.cmp-find small { color: var(--muted); }
.cmp-empty { margin-top: 32px; }
@media (max-width: 760px) {
  .cmp { overflow-x: auto; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cmp-row-head { position: static; }
  .cmp-v { font-size: 1.15rem; }
  .cmp-name { font-size: 1.2rem; }
}
.cmp-empty .btn { white-space: normal; height: auto; padding-block: 10px; text-align: center; }