/* Kantor comparison page. Colours and base components come from styles.css. */
.k-hero { padding: 34px 0 6px; }
.k-hero h1 { font: 680 clamp(26px, 5vw, 40px)/1.12 var(--sans); letter-spacing: -0.02em; color: var(--text); margin: 0; max-width: 22ch; }
.k-lead { margin: 10px 0 0; color: var(--text-2); font-size: 16px; max-width: 60ch; }
.k-ask { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 22px; }
.k-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.k-field.grow { flex: 1 1 240px; max-width: 340px; }
.k-lbl { font-size: 13px; color: var(--text-2); font-weight: 600; }
.k-ask .amt { height: 52px; font-size: 22px; font-weight: 650; }
.k-ask .swapbtn { margin-bottom: 4px; }
.k-wantbox { display: inline-flex; align-items: center; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 20px; font-weight: 650; }
.k-curline { margin: 8px 0 0; font-size: 13px; color: var(--text-3); }
.k-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 24px; }
.k-fig { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.k-fig:hover { border-color: var(--accent); }
.k-figlabel { font-size: 13px; color: var(--text-2); }
.k-fignum { font-size: 24px; font-weight: 660; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.k-figsub { font-size: 13px; color: var(--text-2); }
.k-figbig { grid-column: 1 / -1; padding: 18px 20px; }
.k-figbig .k-fignum { font-size: clamp(46px, 11vw, 92px); line-height: 1.02; font-weight: 690; letter-spacing: -0.035em; }
.k-figbig .k-figsub { font-size: 17px; color: var(--text); font-weight: 600; }
.k-fig:hover .k-fignum { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.1em; }
.k-counts { margin: 12px 0 0; font-size: 13.5px; color: var(--text-2); }
.k-empty { margin: 0; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--text-2); grid-column: 1 / -1; }
.k-filters { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 4px; font-size: 14px; color: var(--text-2); }
.k-filters label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.k-filters input { width: 17px; height: 17px; accent-color: var(--accent); }
.k-list, .k-ulist { list-style: none; margin: 0; padding: 0; }
.k-row { border-top: 1px solid var(--line); padding: 16px 0; scroll-margin-top: 16px; border-radius: 6px; }
.k-row:first-child { border-top: 0; }
.k-rowhead { display: flex; align-items: flex-start; gap: 12px; }
.k-rank { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.k-top .k-rank { background: var(--text); color: var(--surface); border-color: var(--text); }
.k-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.k-name { font-size: 16px; }
.k-addr { font-size: 14px; color: var(--text-2); }
.k-value { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: right; }
.k-value:hover, .k-value[aria-expanded="true"] { border-color: var(--accent); }
.k-value:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.k-get, .k-rate { font-size: 12px; color: var(--text-2); }
.k-num { font-size: 22px; font-weight: 680; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 40px; }
.k-chip { font-size: 12.5px; line-height: 1.3; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--surface); }
.k-chip.k-open { color: var(--text); }
.k-chip.k-open::before { content: "●"; color: var(--good); margin-right: 5px; font-size: 10px; }
.k-chip.k-closed::before { content: "○"; margin-right: 5px; font-size: 10px; }
.k-chip.k-cond { border-style: dashed; color: var(--text); }
.k-chip.k-walk { color: var(--text); }
.k-chip.k-warn { border-color: var(--warning); color: var(--text); }
.k-chip.k-warn::before { content: "!"; font-weight: 700; margin-right: 5px; }
.k-cmp { margin: 8px 0 0 40px; font-size: 13.5px; color: var(--text-2); }
.k-isbest { font-weight: 650; color: var(--text); }
.k-detail { margin: 12px 0 0 40px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.k-formula { margin: 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.k-facts { margin: 8px 0 0; padding-left: 18px; color: var(--text-2); font-size: 14px; }
.k-facts li { margin: 3px 0; }
.k-actions { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; }
.k-act { font-size: 14px; font-weight: 600; }
.k-flash { animation: kflash 1.6s ease-out; }
@keyframes kflash { from { background: var(--hl); } to { background: transparent; } }
.k-urow { border-top: 1px solid var(--line); padding: 12px 0; scroll-margin-top: 16px; }
.k-urow:first-child { border-top: 0; }
.k-urow .k-addr { font-size: 14px; }
.k-why { margin: 4px 0 6px; color: var(--text-2); font-size: 14px; max-width: 70ch; }
.k-plain { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 14px; }
.k-plain li { margin: 5px 0; }
.k-median td { font-weight: 650; border-bottom: 0; }
td.r, th.r { text-align: right; }
.k-again { margin-left: auto; }
.k-citypick { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; max-width: 320px; }
.k-back { font-weight: 600; text-decoration: none; }
.cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 17px 24px; border-radius: 14px; background: var(--text); color: var(--surface); font-size: clamp(17px, 2.6vw, 20px); font-weight: 660; letter-spacing: -0.01em; text-decoration: none; box-shadow: var(--shadow); }
.cta:hover { background: var(--accent); color: #fff; }
.cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 560px) {
  .k-rowhead { flex-wrap: wrap; }
  .k-value { flex: 1 1 100%; align-items: flex-start; text-align: left; margin-left: 40px; }
  .k-chips, .k-cmp, .k-detail { margin-left: 0; }
  .k-ask .k-field.grow { flex-basis: 100%; max-width: none; }
  .cta { width: 100%; justify-content: center; text-align: center; }
}
.k-warnbox { border-color: var(--warning); border-width: 2px; }
.k-warnbox h2::before { content: "!"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border-radius: 50%; background: var(--warning); color: #1a1a19; font-size: 14px; font-weight: 800; vertical-align: 2px; }
.k-warnbox .k-plain { color: var(--text); font-size: 15px; }
.k-src { align-self: flex-start; margin-top: 3px; font-size: 13.5px; font-weight: 600; }
.k-srclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; font-size: 15px; }
.k-srclist a { font-weight: 600; }