/* Compare towns (/compare/…) — app/compare.php + compare.js. Loaded only on that view, after
   rankings.css (for .rk-thumb). One colour per column (c0–c3) carries through slots, headers,
   bars and "What stands out". Tokens fall back so it works with either skin. */

body.v-compare{background:var(--bg-2,#f3f5f6)}
.cmp{--c0:#0e9f57;--c1:#3b7fd4;--c2:#c67e18;--c3:#8a5cd0;display:flex;flex-direction:column;gap:20px;container-type:inline-size;min-width:0;max-width:1100px;margin:0 auto;padding:24px 16px 56px}
@media(max-width:640px){.cmp{padding:18px 14px 44px}}
.cmp .c0{--c:var(--c0)}.cmp .c1{--c:var(--c1)}.cmp .c2{--c:var(--c2)}.cmp .c3{--c:var(--c3)}
.cmp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cmp .faint{color:var(--faint,#98a0ab)}
.cmp-card{background:var(--surface,#fff);border:1px solid var(--line,#eef1f3);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06)}
.cmp-card h2{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.02em}

.cmp-crumbs{display:flex;gap:8px;font-size:13px;font-weight:600;color:var(--muted,#5c6674)}
.cmp-crumbs a:hover{color:var(--green,#0e9f57)}
.cmp-crumbs span{color:var(--faint,#98a0ab)}
.cmp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cmp-kicker{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green,#0e9f57);margin-bottom:6px}
.cmp-h1{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.12;overflow-wrap:break-word}
.cmp-h1 .vs{color:var(--faint,#98a0ab);font-weight:700;font-size:.8em}
.cmp-dek{margin-top:8px;font-size:15.5px;color:var(--copy,#37414d);max-width:70ch}
.cmp-actions{display:flex;gap:8px}
.cmp-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:999px;border:1px solid var(--line-2,#e2e6ea);background:var(--surface,#fff);font-weight:700;font-size:14px;color:var(--text,#1d2733);white-space:nowrap;cursor:pointer}
.cmp-btn svg{width:16px;height:16px}
.cmp-btn:hover{border-color:var(--green-line,rgba(14,159,87,.3))}
.cmp-btn.primary{background:var(--green,#0e9f57);border-color:var(--green,#0e9f57);color:#fff}
.cmp-btn.primary:hover{filter:brightness(1.06)}

/* town slots */
.cmp-slots{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px}
.cmp-slot{position:relative;display:flex;align-items:center;gap:12px;padding:12px 40px 12px 14px;border-radius:14px;background:var(--surface,#fff);border:1px solid var(--line-2,#e2e6ea);min-height:76px;min-width:0}
.cmp-slot::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--c)}
.cmp-slot .cmp-thumb{width:46px;height:46px;border-radius:11px;font-size:18px}
.cmp-slot .nm{min-width:0}
.cmp-slot .nm b{display:block;font-family:var(--display);font-size:16.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-slot .nm small{display:block;font-size:12.5px;color:var(--muted,#5c6674);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-slot .nm:hover b{color:var(--green,#0e9f57)}
.cmp-slot .x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--faint,#98a0ab)}
.cmp-slot .x svg{width:14px;height:14px}
.cmp-slot .x:hover{background:var(--surface-hi,#eef1f3);color:var(--text,#1d2733)}
.cmp-slot.add{flex-direction:column;align-items:stretch;gap:8px;padding:10px;border-style:dashed;background:transparent}
.cmp-slot.add::before{display:none}
.cmp-search{position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;background:var(--surface,#fff);border:1px solid var(--line-2,#e2e6ea)}
.cmp-search:focus-within{border-color:var(--green,#0e9f57)}
.cmp-search svg{width:16px;height:16px;color:var(--faint,#98a0ab);flex:none}
.cmp-search input[type=text]{border:0;outline:0;background:none;font:inherit;font-size:14px;color:var(--text,#1d2733);flex:1;min-width:0}
.cmp-sugg-list{position:absolute;z-index:20;left:-1px;right:-1px;top:calc(100% + 4px);background:var(--surface,#fff);border:1px solid var(--line-2,#e2e6ea);border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.14);overflow:hidden;min-width:240px}
.cmp-sugg-list a{display:block;padding:9px 12px;font-size:14px;border-bottom:1px solid var(--line,#eef1f3)}
.cmp-sugg-list a:last-child{border-bottom:0}
.cmp-sugg-list a small{display:block;font-size:12px;color:var(--muted,#5c6674)}
.cmp-sugg-list a:hover,.cmp-sugg-list a.on{background:var(--surface-2,#f6f8f9)}
.cmp-sugg{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12px}
.cmp-sugg span{width:100%;color:var(--faint,#98a0ab);font-weight:700;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.cmp-sugg a{height:26px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;border:1px solid var(--line-2,#e2e6ea);background:var(--surface,#fff);font-size:12.5px;font-weight:600;color:var(--copy,#37414d)}
.cmp-sugg a:hover{border-color:var(--green-line,rgba(14,159,87,.3));color:var(--green,#0e9f57)}
.cmp-empty{padding:22px}
.cmp-empty p{margin-top:6px;color:var(--copy,#37414d);font-size:15px}

/* what stands out */
.cmp-standout{padding:18px 20px}
.cmp-standout h2{margin-bottom:10px}
.cmp-standout h2 small{font-family:var(--sans);font-size:12px;font-weight:500;color:var(--faint,#98a0ab);letter-spacing:0;margin-left:6px}
.cmp-so-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.cmp-so{display:flex;gap:10px;font-size:14.5px;color:var(--copy,#37414d);line-height:1.45}
.cmp-so .dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;margin-top:6px}
.cmp-callout{margin-top:14px;display:flex;gap:10px;padding:11px 14px;border-radius:12px;background:#fdf4e6;color:#7a4d0e;font-size:13.5px}
.cmp-callout svg{width:18px;height:18px;flex:none;margin-top:1px}

/* priorities */
.cmp-pri{padding:18px 20px}
.cmp-pri-h p{margin-top:4px;font-size:14px;color:var(--muted,#5c6674);max-width:75ch}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cmp-chip{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2,#e2e6ea);background:var(--surface,#fff);font-size:13.5px;font-weight:600;color:var(--copy,#37414d);cursor:pointer}
.cmp-chip:hover{border-color:var(--green-line,rgba(14,159,87,.3))}
.cmp-chip[aria-pressed=true]{background:var(--green,#0e9f57);border-color:var(--green,#0e9f57);color:#fff}
.cmp-chip[aria-pressed=true]::before{content:"✓ "}
.cmp-fit{margin-top:14px;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px}
.cmp-fit-t{padding:12px 14px;border-radius:12px;background:var(--surface-2,#f6f8f9);border-top:3px solid var(--c)}
.cmp-fit-t b{display:block;font-family:var(--display);font-size:15px}
.cmp-fit-t .n{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-top:2px}
.cmp-fit-t .n small{font-size:13px;font-weight:600;color:var(--muted,#5c6674);letter-spacing:0}
.cmp-fit-t ul{list-style:none;margin-top:6px;font-size:12.5px;color:var(--copy,#37414d)}
.cmp-fit-t li::before{content:"✓ ";color:var(--green,#0e9f57);font-weight:700}
.cmp-fit-note{grid-column:1/-1;font-size:12.5px;color:var(--faint,#98a0ab)}

/* toolbar */
.cmp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cmp-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.cmp-tabs::-webkit-scrollbar{display:none}
.cmp-tabs button{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2,#e2e6ea);background:var(--surface,#fff);font-size:13.5px;font-weight:600;color:var(--copy,#37414d);cursor:pointer;white-space:nowrap}
.cmp-tabs button.on{background:var(--text,#1d2733);border-color:var(--text,#1d2733);color:#fff}
.cmp-toggles{display:flex;gap:16px;font-size:13.5px;color:var(--muted,#5c6674);font-weight:600}
.cmp-toggles label{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap}
.cmp-toggles input{accent-color:var(--green,#0e9f57);width:16px;height:16px}

/* the table */
.cmp-table-wrap{overflow-x:auto}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;min-width:calc(170px + var(--n) * 140px);font-size:14px}
.cmp-table th,.cmp-table td{padding:12px 16px;border-bottom:1px solid var(--line,#eef1f3);text-align:left;vertical-align:middle}
.cmp-table thead th{font-family:var(--display);font-size:15px;font-weight:700;border-bottom-color:var(--line-2,#e2e6ea);white-space:nowrap}
.cmp-table thead .sw{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--c);margin-right:8px}
.cmp-table .lab{position:sticky;left:0;z-index:1;background:var(--surface,#fff);width:190px;font-weight:600;color:var(--copy,#37414d)}
.cmp-table .lab small{display:block;font-size:12px;font-weight:500;color:var(--faint,#98a0ab);margin-top:1px}
.cmp-table tr.sec th{background:var(--surface-2,#f6f8f9);font-family:var(--display);font-size:13px;font-weight:700;color:var(--text,#1d2733);padding:9px 16px;position:sticky;left:0}
.cmp-table tr.sec svg{width:15px;height:15px;color:var(--green,#0e9f57);vertical-align:-3px;margin-right:7px}
.cmp-pri-body tr.sec th{background:var(--green-bg,rgba(14,159,87,.10));color:var(--green,#0b7f45)}
.cmp-table td .num{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cmp-table td .moe{font-family:var(--sans);font-size:11.5px;font-weight:500;color:var(--faint,#98a0ab);letter-spacing:0}
.cmp-table td.txt{color:var(--copy,#37414d)}
.cmp-table td.txt a{color:var(--green,#0e9f57);font-weight:600}
.cmp-table td.none{color:var(--faint,#98a0ab)}
.cmp .tag{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:5px;background:var(--surface-hi,#eef1f3);color:var(--muted,#5c6674)}
.cmp .tag.hi{background:var(--surface-hi,#eef1f3)}
.cmp .tag.fit{background:var(--green,#0e9f57);color:#fff}
.cmp-table .bar{position:relative;height:6px;margin-top:6px;border-radius:99px;background:var(--surface-hi,#eef1f3)}
.cmp-table .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--c)}
.cmp-table .bench{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text,#1d2733);opacity:.45;border-radius:1px}
.cmp-table .rel{margin-top:4px;font-size:12px;color:var(--muted,#5c6674)}
.cmp-table tr.close td{padding-top:0;margin-top:-4px;font-size:12px;color:#9c6a13}
.cmp-table tr.close svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.cmp-table td.is-fit{background:linear-gradient(0deg,rgba(14,159,87,.06),rgba(14,159,87,.06))}
.cmp-table-wrap.no-bench .bench,.cmp-table-wrap.no-bench .rel{display:none}
.cmp-table-wrap.diff-only tr[data-flat]{display:none}
.cmp-table tbody[hidden]{display:none}
.cmp-foot{font-size:12.5px;color:var(--faint,#98a0ab);line-height:1.6}
.cmp-foot b{color:var(--muted,#5c6674);font-weight:600}
.cmp-foot .legend i{display:inline-block;width:2px;height:12px;background:var(--text,#1d2733);opacity:.45;vertical-align:-1px}

@container (max-width:760px){
  .cmp-slots{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .cmp-slot.add{grid-column:1/-1} /* the add box + suggestions get their own row, never stretching a town card */
  .cmp-so-list{grid-template-columns:1fr}
  .cmp-fit{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (max-width:560px){
  .cmp-h1{font-size:26px}
  .cmp-actions{width:100%}.cmp-actions .cmp-btn{flex:1;justify-content:center}
  /* towns: one compact row each */
  .cmp-slots{grid-template-columns:1fr;gap:8px}
  .cmp-slot{padding:9px 36px 9px 12px;gap:10px;min-height:0}
  .cmp-slot .cmp-thumb{width:34px;height:34px;font-size:15px;border-radius:9px}
  .cmp-slot .nm b{font-size:15px}
  .cmp-slot .x{top:50%;transform:translateY(-50%)}
  .cmp-slot.add{padding:10px}
  .cmp-sugg span{width:auto;margin-right:2px}
  /* table → stacked cards: each measure is a full-width label over a grid of town values */
  .cmp-table-wrap{overflow:visible}
  .cmp-table,.cmp-table tbody{display:block;min-width:0;width:100%}
  .cmp-table tbody[hidden]{display:none}
  .cmp-table thead{display:none}
  .cmp-table tr{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:10px 12px;padding:12px 14px;border-bottom:1px solid var(--line,#eef1f3)}
  .cmp-table tr:has(+ tr.close){border-bottom:0;padding-bottom:6px}
  .cmp-table th,.cmp-table td{padding:0;border:0;min-width:0}
  .cmp-table .lab{position:static;width:auto;grid-column:1/-1;background:none}
  .cmp-table td{border-left:3px solid var(--c);padding-left:9px}
  .cmp-table td::before{content:attr(data-town);display:block;font-size:11.5px;font-weight:700;color:var(--muted,#5c6674);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmp-table td.is-fit{border-radius:0 8px 8px 0;padding:4px 6px 6px 9px}
  .cmp-table td .num{font-size:15.5px}
  .cmp-table tr.sec{padding:0;display:block}
  .cmp-table tr.sec th{display:block;position:static;padding:9px 14px}
  .cmp-table tr.close{display:block;padding:0 14px 12px}
  .cmp-table tr.close td:first-child{display:none}
  .cmp-table tr.close td{display:block;border:0;padding:0}
  .cmp-table tr.close td::before{content:none}
  .cmp-toggles{width:100%;justify-content:space-between}
}
/* narrowest phones: one line per town (name · value), bar + benchmark underneath */
@container (max-width:420px){
  .cmp-table tr{grid-template-columns:1fr;gap:8px}
  .cmp-table td{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline}
  .cmp-table td::before{max-width:48vw}
  .cmp-table td::before{margin:0}
  .cmp-table td .num{justify-content:flex-end;text-align:right}
  .cmp-table td .bar,.cmp-table td .rel{grid-column:1/-1}
  .cmp-table td.txt{display:block}
  .cmp-table td.txt::before{margin-bottom:2px}
}