/* ============================================================================
   Keyword comparison page.

   A grid of columns rather than a fixed two-up layout, so a three- or
   six-way comparison lays out sensibly. Its styles live here instead of an
   inline <style> block, which is what lets the page share the base layer's
   tokens and honour the app's strict CSP without an exception.
   ========================================================================== */

.cmp-wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: clamp(20px, 3vw, 34px) clamp(16px, 3vw, 32px) 64px; }
.cmp-head { margin-bottom: 20px; }
.cmp-back { display: inline-block; color: var(--faint); text-decoration: none; font: 500 11.5px/1 var(--mono); }
.cmp-back:hover { color: var(--ink); }
.cmp-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); margin: 8px 0 4px; }
.cmp-sub { margin: 0; color: var(--dim); font-size: 13px; }

.cmp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.cmp-pick select {
  flex: 1 1 260px; min-width: 0; min-height: 190px; padding: 8px 10px;
  color: var(--ink); background: #0c0e12; border: 1px solid var(--line-2);
  border-radius: 10px; font: 500 13px/1.5 var(--ui);
}
.cmp-pick select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(61,220,151,.14); }
.cmp-hint { flex: 0 0 100%; margin: 0; color: var(--faint); font-size: 11.5px; }
.cmp-notice { margin: 12px 0; padding: 10px 13px; border-radius: 9px; color: var(--dim); background: var(--bg-3); border: 1px solid var(--line); }

.cmp-cols { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cmp-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--bg-2); min-width: 0; }
.cmp-col-head { display: flex; align-items: flex-start; gap: 8px; }
.cmp-col h2 { flex: 1 1 auto; margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.cmp-col h2 a { color: var(--ink); text-decoration: none; }
.cmp-col h2 a:hover { color: var(--accent); }
.cmp-drop { flex: 0 0 auto; color: var(--faint); text-decoration: none; font-size: 16px; line-height: 1; padding: 0 3px; }
.cmp-drop:hover { color: var(--neg); }
.cmp-total { font-family: var(--display); font-weight: 600; font-size: 2rem; margin: 4px 0 10px; }
.cmp-total small { font-size: .7rem; color: var(--faint); text-transform: uppercase; letter-spacing: .12em; }
.cmp-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 8px 0; background: #0c0e12; }
.cmp-bar span:nth-child(1) { background: var(--pos); }
.cmp-bar span:nth-child(2) { background: var(--neu); opacity: .6; }
.cmp-bar span:nth-child(3) { background: var(--neg); }
.cmp-counts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; }
.cmp-net { margin-left: auto; }
.cmp-themes { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cmp-themes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

.cmp-delta { margin-top: 18px; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 14px 18px; }
.cmp-delta-main { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 18px; }
.cmp-delta-k { color: var(--faint); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.cmp-delta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--dim); font-size: 13px; }
.cmp-delta-list b { color: var(--ink); }