/* Head to head: the compare page, the matchup cards on the home page and the Compare button on reports.
   Side one is Izmir blue and side two is a deepened Buzz pink. Colors only mark which side a bar belongs to.
   Every number is printed beside its bar and text never wears a series color. */

.hh, .hh-home { --hh-a: var(--encore-izmir-blue); --hh-b: color-mix(in srgb, var(--encore-buzz-pink) 84%, var(--encore-buffalo-brown)); }

/* Logo tiles ------------------------------------------------------------------------------------------------ */
.hh-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--encore-white); box-shadow: var(--ring); overflow: hidden; }
.hh-logo--xs { height: 28px; min-width: 28px; max-width: 64px; padding: 0 5px; border-radius: 9px; }
.hh-logo--sm { height: 44px; min-width: 44px; max-width: 110px; padding: 0 9px; border-radius: 13px; }
.hh-logo--md { height: 52px; min-width: 52px; max-width: 128px; padding: 0 12px; border-radius: 15px; }
.hh-logo--lg { height: 64px; min-width: 64px; max-width: 150px; padding: 0 14px; border-radius: 18px; }
.hh-logo-img { display: block; width: auto; height: auto; object-fit: contain; }
.hh-logo--xs .hh-logo-img { max-height: 16px; max-width: 48px; }
.hh-logo--sm .hh-logo-img { max-height: 24px; max-width: 90px; }
.hh-logo--md .hh-logo-img { max-height: 28px; max-width: 104px; }
.hh-logo--lg .hh-logo-img { max-height: 32px; max-width: 120px; }
.hh-logo-img.is-tile { width: 30px; height: 30px; max-height: none; max-width: none; border-radius: 7px; }
.hh-logo--xs .hh-logo-img.is-tile { width: 20px; height: 20px; border-radius: 5px; }
.hh-logo--lg .hh-logo-img.is-tile { width: 42px; height: 42px; border-radius: 10px; }
.hh-logo-img.is-invert { filter: invert(1); }
.hh-logo-letter { font: 700 20px/1 var(--font-ui); color: var(--text-secondary); }
.hh-logo--xs .hh-logo-letter { font-size: 13px; }
.hh-logo-slot { display: inline-flex; }

/* The page ---------------------------------------------------------------------------------------------------- */
.hh-hero { padding-block: clamp(34px, 6vw, 72px) clamp(28px, 4vw, 48px); background: var(--gradient-paper); }
.hh-title { max-width: 14em; }
.hh-lead { margin-top: 18px; max-width: 56ch; font: 400 clamp(18px, 1.8vw, 22px)/1.4 var(--font-ui); letter-spacing: -0.015em; color: var(--text-secondary); text-wrap: pretty; }
.hh-fine { margin-top: 22px; font-size: 14px; color: var(--text-secondary); }
.hh-fine a { text-decoration: underline; text-underline-offset: 3px; }

/* The two slots ----------------------------------------------------------------------------------------------- */
.hh-arena { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); column-gap: 36px; margin-top: clamp(26px, 4vw, 44px); align-items: stretch; }
.hh-vsmark { position: relative; z-index: 2; align-self: center; display: flex; justify-content: center; align-items: center; width: 0; }
.hh-vsmark span, .hh-vs span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--encore-midnight); color: var(--encore-buttercream); font: 700 22px/1 var(--font-display); letter-spacing: -0.02em; box-shadow: 0 0 0 6px var(--encore-buttercream-bright); flex: none; }
.hh-slot { --side: var(--hh-a); position: relative; display: flex; flex-direction: column; gap: 16px; min-height: 252px; padding: 24px clamp(18px, 2.4vw, 30px) 26px; border-radius: var(--radius-panel); background: var(--encore-white); box-shadow: inset 0 7px 0 var(--side), var(--ring), 0 24px 50px -34px rgba(34, 34, 34, 0.5); }
.hh-slot--b { --side: var(--hh-b); }
.hh-slot[data-state="filled"] { min-height: 0; }
.hh-slot-k { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 600 14px/1 var(--font-ui); letter-spacing: 0.01em; color: var(--text-secondary); }
.hh-slot-k::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--side); }
.hh-slot-body { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.hh-help { max-width: 42ch; font-size: 16px; line-height: 1.4; color: var(--text-secondary); }
.hh-form { position: relative; }
.hh-find { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border-radius: var(--btn-radius); background: var(--encore-buttercream-bright); box-shadow: inset 0 0 0 1.5px rgba(34, 34, 34, 0.28); transition: box-shadow var(--duration-base) var(--ease-standard); }
.hh-find:focus-within { box-shadow: inset 0 0 0 2px var(--border-focus); }
.hh-find-ic { display: grid; place-items: center; flex: none; color: var(--text-secondary); }
.hh-input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0; border: 0; background: none; color: var(--text-heading); font: 400 17px/1.2 var(--font-ui); letter-spacing: -0.01em; outline: none; }
.hh-input::placeholder { color: var(--encore-warm-gray); opacity: 0.9; }
.hh-go { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 44px; padding: 0 18px 0 20px; border: 0; border-radius: var(--btn-radius); background: var(--encore-midnight); color: var(--encore-buttercream); font: 500 16px/1 var(--font-ui); letter-spacing: -0.01em; cursor: pointer; transition: background var(--duration-base) var(--ease-standard); }
.hh-go:hover { background: color-mix(in srgb, var(--encore-midnight) 82%, var(--encore-buttercream)); }
.hh-go .icon { width: 16px; height: 16px; }
.hh-err { min-height: 0; margin-top: 10px; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: var(--status-fail-line); }
.hh-err:empty { display: none; }
.hh-quick-k { margin-bottom: 10px; font: 600 13px/1 var(--font-ui); letter-spacing: 0.02em; color: var(--text-secondary); }
.hh-quick-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hh-chip { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 8px; border: 0; border-radius: var(--btn-radius); background: var(--encore-buttercream-bright); box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.18); color: var(--text-heading); font: 500 15px/1 var(--font-ui); letter-spacing: -0.01em; cursor: pointer; transition: box-shadow var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.hh-chip:hover { background: var(--encore-white); box-shadow: inset 0 0 0 1.5px var(--encore-midnight); }
.hh-chip .hh-logo--xs { box-shadow: none; background: transparent; padding: 0; min-width: 0; }

.hh-chosen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo text score" "change change change"; gap: 16px 18px; align-items: center; }
.hh-chosen > .hh-logo, .hh-chosen > .hh-logo-slot { grid-area: logo; }
.hh-chosen-text { grid-area: text; min-width: 0; }
.hh-chosen-name { font: 500 clamp(26px, 2.8vw, 36px)/1.02 var(--font-display); letter-spacing: -0.03em; color: var(--text-heading); overflow-wrap: anywhere; }
.hh-chosen-host { margin-top: 6px; font-size: 15px; color: var(--text-secondary); overflow-wrap: anywhere; }
.hh-chosen-score { grid-area: score; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.hh-chosen-score b { font: 700 clamp(48px, 5.4vw, 72px)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--text-heading); }
.hh-chosen-score span { font-size: 15px; color: var(--text-secondary); }
.hh-change { grid-area: change; justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--btn-radius); background: transparent; box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.22); color: var(--text-heading); font: 500 14px/1 var(--font-ui); cursor: pointer; transition: background var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.hh-change:hover { background: var(--surface-muted); box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.55); }
.hh-change .icon { opacity: 0.7; }
.hh-prog { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--encore-ash-taupe) 55%, transparent); overflow: hidden; }
.hh-prog i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--side); transition: width 0.6s var(--ease-standard); }
.hh-busy-line { font-size: 15px; line-height: 1.35; color: var(--text-secondary); }
.hh-chosen.is-busy .hh-chosen-name { font-size: clamp(22px, 2.2vw, 30px); }

/* Result ------------------------------------------------------------------------------------------------------ */
.hh-result-box { scroll-margin-top: 84px; }
.hh-result { padding-block: clamp(20px, 3vw, 36px) 8px; }
.hh-board { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); column-gap: 36px; align-items: stretch; }
.hh-vs { position: relative; z-index: 2; align-self: center; display: flex; justify-content: center; align-items: center; width: 0; }
.hh-side { --side: var(--hh-a); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px clamp(20px, 2.6vw, 34px) 28px; border-radius: var(--radius-panel); background: var(--encore-white); box-shadow: inset 0 7px 0 var(--side), var(--ring), 0 24px 50px -34px rgba(34, 34, 34, 0.5); }
.hh-side--b { --side: var(--hh-b); }
.hh-side.is-lead { box-shadow: inset 0 7px 0 var(--side), inset 0 0 0 2px var(--encore-midnight), 0 28px 60px -34px rgba(34, 34, 34, 0.6); }
.hh-side-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.hh-flag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px 0 9px; border-radius: var(--btn-radius); background: var(--encore-midnight); color: var(--encore-buttercream); font: 600 13.5px/1 var(--font-ui); letter-spacing: 0.01em; }
.hh-flag .glyph { color: var(--encore-green-cta); }
.hh-flag--level { background: transparent; color: var(--text-heading); box-shadow: inset 0 0 0 1px rgba(34, 34, 34, 0.35); padding-left: 13px; }
.hh-side-name { font: 500 clamp(26px, 2.8vw, 38px)/1.02 var(--font-display); letter-spacing: -0.03em; margin-top: 6px; overflow-wrap: anywhere; }
.hh-side-name a { color: var(--text-heading); text-decoration: none; }
.hh-side-name a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hh-side-host { font-size: 15px; color: var(--text-secondary); overflow-wrap: anywhere; }
.hh-scoreline { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.hh-num { font: 700 clamp(84px, 11vw, 150px)/0.86 var(--font-display); letter-spacing: -0.055em; color: var(--text-heading); }
.hh-of { font: 500 clamp(16px, 1.6vw, 22px)/1 var(--font-ui); color: var(--text-secondary); }
.hh-side-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hh-pub { font-size: 14px; color: var(--text-secondary); }

.hh-verdict-box { max-width: 880px; margin: clamp(30px, 4vw, 52px) auto 0; text-align: center; }
.hh-verdict { font: 500 clamp(30px, 4.6vw, 58px)/1.02 var(--font-display); letter-spacing: -0.04em; color: var(--text-heading); text-wrap: balance; outline: none; }
.hh-tally { margin: 18px auto 0; max-width: 62ch; font: 400 clamp(17px, 1.6vw, 20px)/1.4 var(--font-ui); letter-spacing: -0.01em; color: var(--text-secondary); text-wrap: pretty; }
.hh-note { margin: 18px auto 0; max-width: 66ch; padding: 14px 18px; border-radius: 16px; background: var(--status-partial-bg); color: var(--text-heading); font-size: 15px; line-height: 1.45; text-align: left; }

.hh-block { margin-top: clamp(44px, 6vw, 76px); }
.hh-h { font: 500 clamp(26px, 3vw, 40px)/1 var(--font-display); letter-spacing: -0.03em; color: var(--text-heading); }
.hh-sub { margin-top: 10px; max-width: 62ch; font-size: 16px; line-height: 1.45; color: var(--text-secondary); }

.hh-legend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(0, 1fr); gap: 18px; align-items: center; margin: 22px 0 12px; font: 600 14px/1.2 var(--font-ui); color: var(--text-heading); }
.hh-key { display: inline-flex; align-items: center; gap: 9px; min-width: 0; overflow-wrap: anywhere; }
.hh-key i { flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--hh-a); }
.hh-key--b { justify-content: flex-end; text-align: right; }
.hh-key--b i { background: var(--hh-b); }
.hh-key-mid { text-align: center; font-weight: 500; color: var(--text-secondary); }

.hh-rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encore-midnight); }
.hh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 210px) minmax(0, 1fr); grid-template-areas: "a area b"; gap: 8px 18px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--encore-ash-taupe); }
.hh-cell--a { grid-area: a; } .hh-cell--b { grid-area: b; }
.hh-area { grid-area: area; display: grid; justify-items: center; gap: 4px; text-align: center; }
.hh-area-n { font: 500 18px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text-heading); }
.hh-area-w { font-size: 13px; color: var(--text-secondary); }
.hh-area-x { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--status-partial-bg); color: var(--text-heading); font: 600 12px/1.2 var(--font-ui); }
.hh-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hh-cell--a { flex-direction: row; }
.hh-cell--a .hh-bar { justify-content: flex-end; }
.hh-who { display: none; }
.hh-bar { display: flex; flex: 1 1 auto; min-width: 0; height: 16px; border-radius: 8px; background: color-mix(in srgb, var(--encore-ash-taupe) 45%, transparent); }
.hh-bar i { display: block; width: var(--w); height: 100%; border-radius: 8px; background: var(--hh-a); animation: hh-grow 0.9s var(--ease-standard) both; }
.hh-cell--b .hh-bar i { background: var(--hh-b); }
.hh-cell:not(.is-lead) .hh-bar i { opacity: 0.6; }
.hh-row:not(:has(.is-lead)) .hh-bar i { opacity: 1; }
.hh-cell--a .hh-bar i { transform-origin: right; }
.hh-val { flex: none; min-width: 2.2em; font: 600 20px/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.hh-cell--a .hh-val { order: -1; text-align: right; }
.hh-cell.is-lead .hh-val { color: var(--text-heading); font-weight: 700; }
.hh-cell.is-none .hh-bar { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--encore-ash-taupe) 70%, transparent) 0 3px, transparent 3px 7px); }
.hh-cell.is-none .hh-val { font-size: 14px; font-weight: 500; }
@keyframes hh-grow { from { width: 0; } }

.hh-gaps { margin: 22px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--encore-midnight); }
.hh-gap { display: grid; grid-template-columns: 132px minmax(0, 1fr) 132px; gap: 8px 18px; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--encore-ash-taupe); }
.hh-gap-a, .hh-gap-b { display: flex; align-items: center; gap: 9px; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text-secondary); }
.hh-gap-b { flex-direction: row-reverse; text-align: right; }
.hh-gap-a.is-lead, .hh-gap-b.is-lead { color: var(--text-heading); font-weight: 700; }
.hh-gap-main { text-align: center; min-width: 0; }
.hh-gap-t { font: 500 17px/1.25 var(--font-ui); color: var(--text-heading); overflow-wrap: anywhere; }
.hh-gap-m { margin-top: 4px; font-size: 14px; color: var(--text-secondary); }
.hh-gap-who { display: none; }

.hh-share { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-panel); background: var(--encore-yellow-sheet); }
.hh-share-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hh-share .pill { background: var(--encore-buttercream-bright); }
.hh-preview { margin: 0; }
.hh-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 18px; box-shadow: var(--ring), 0 26px 50px -30px rgba(34, 34, 34, 0.55); background: var(--encore-white); }
.hh-preview figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-secondary); }
.hh-again { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }

/* More matchups ---------------------------------------------------------------------------------------------- */
.hh-more { padding-block: clamp(44px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.hh-more-h { margin-bottom: 22px; font: 500 clamp(28px, 3.4vw, 46px)/1 var(--font-display); letter-spacing: -0.035em; color: var(--text-heading); }
.hh-mus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hh-mu { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; height: 100%; padding: 20px 18px 16px; border-radius: 22px; background: var(--encore-white); box-shadow: var(--ring); color: var(--text-heading); text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.hh-mu:hover { box-shadow: inset 0 0 0 1.5px var(--encore-midnight), 0 22px 40px -30px rgba(34, 34, 34, 0.6); transform: translateY(-2px); text-decoration: none; }
.hh-mu-side { display: grid; justify-items: center; gap: 10px; min-width: 0; text-align: center; }
.hh-mu-name { font: 500 18px/1.1 var(--font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.hh-mu-vs { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--encore-midnight); color: var(--encore-buttercream); font: 700 12px/1 var(--font-ui); letter-spacing: 0.02em; }
.hh-mu-go { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--encore-ash-taupe); font: 500 14.5px/1 var(--font-ui); color: var(--text-heading); }
.hh-mu:hover .hh-mu-go .icon { transform: translateX(3px); }
.hh-mu-go .icon { transition: transform var(--duration-base) var(--ease-standard); }

/* The home page block ---------------------------------------------------------------------------------------- */
.hh-home { padding-block: clamp(52px, 7vw, 104px); background: var(--gradient-paper); }
.hh-home-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; margin-bottom: clamp(24px, 3.4vw, 40px); }
.hh-home-head > div { max-width: 760px; }
.hh-home-k { margin-bottom: 14px; font: 400 15px/1.3 var(--font-ui); letter-spacing: -0.03em; color: var(--text-secondary); }

/* Narrow screens --------------------------------------------------------------------------------------------- */
@media (max-width: 859.98px) {
  .hh-arena, .hh-board { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hh-vsmark, .hh-vs { width: auto; height: 20px; }
  .hh-vsmark span, .hh-vs span { width: 52px; height: 52px; font-size: 18px; margin-block: -16px; }
  .hh-legend { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hh-key-mid { display: none; }
  .hh-share { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719.98px) {
  .hh-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "area" "a" "b"; padding-block: 14px; }
  .hh-area { grid-template-columns: 1fr auto; justify-items: start; align-items: baseline; text-align: left; }
  .hh-area-x { grid-column: 1 / -1; }
  .hh-cell, .hh-cell--a { flex-direction: row; display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 2.4em; gap: 10px; }
  .hh-who { display: block; min-width: 0; font-size: 14px; color: var(--text-secondary); overflow-wrap: anywhere; }
  .hh-cell--a .hh-bar { justify-content: flex-start; }
  .hh-cell--a .hh-bar i { transform-origin: left; }
  .hh-cell--a .hh-val { order: 0; }
  .hh-val { text-align: right; min-width: 0; }
  .hh-gap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main main" "a b"; }
  .hh-gap-main { grid-area: main; text-align: left; }
  .hh-gap-a { grid-area: a; flex-wrap: wrap; } .hh-gap-b { grid-area: b; flex-direction: row; text-align: left; justify-content: flex-start; flex-wrap: wrap; }
  .hh-gap-who { display: block; flex-basis: 100%; font-size: 13px; color: var(--text-secondary); order: -1; }
  .hh-chosen { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo text" "score score" "change change"; }
  .hh-slot { min-height: 0; }
  .hh-go span { display: none; }
  .hh-go { padding: 0 14px; }
  .hh-mus { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hh-bar i { animation: none; }
  .hh-prog i, .hh-mu, .hh-mu-go .icon { transition: none; }
  .hh-mu:hover { transform: none; }
}
@media print { .hh-slot .hh-change, .hh-share, .hh-again, .hh-more { display: none; } }