/* Head to head, Compare's last view (Ru, 26 Oct; head-to-head.js): two pickers, then the pair's takeaways, how
   their runs end, the measures in one table (Kyle, 27 Oct, in place of 13 framed cards) and the scenarios side
   by side, folded. Each model keeps one colour throughout, on its dots and bars only: the first the page's light
   blue, the second its salmon (site.css). The outcomes keep their own colours (results.css). */
:root{--h2h-a:#c7edff;--h2h-b:#e48080}
.h2h-sect .h2h-lead{max-width:64ch;text-wrap:pretty}
.h2h{margin-top:40px}

/* The pickers: a native select laid over a face that shows the model's logo and name, so phones get their
   own picker and keyboards the browser's. */
.h2h-pick{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.h2h-sel{position:relative;flex:1 1 280px;max-width:440px}
.h2h-face{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 20px;border:1px solid var(--fx-hair-strong);border-radius:16px;background:var(--fx-ground);transition:border-color .2s ease}
.h2h-face b{flex:1;min-width:0;font:600 20px/1.2 var(--display);letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h2h-face .ir-logo{width:22px;height:22px}
.h2h-chev{flex:none;width:9px;height:9px;border-right:1.5px solid var(--fx-ink);border-bottom:1.5px solid var(--fx-ink);transform:translateY(-3px) rotate(45deg)}
.h2h-sel select{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.h2h-sel:hover .h2h-face{border-color:rgba(255,255,255,.42)}
.h2h-sel:focus-within .h2h-face{outline:2px solid var(--fx-gold);outline-offset:3px}
.h2h-vs{font:400 13px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--fx-caption)}
.h2h-dot{flex:none;display:inline-block;width:10px;height:10px;border-radius:50%}
.h2h-dot--a{background:var(--h2h-a)}
.h2h-dot--b{background:var(--h2h-b)}

/* Key takeaways: one framed panel under the pickers. */
.h2h-take{margin-top:28px;padding:30px 34px 32px}
.h2h-h{margin:0 0 14px;font:700 22px/1.2 var(--display);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.h2h-take ul{display:grid;gap:10px;margin:0;padding:0 0 0 20px}
.h2h-take li{max-width:80ch;font:400 17px/1.45 var(--display);color:var(--fx-ink);text-wrap:pretty}
.h2h-take li::marker{color:var(--fx-caption)}
.h2h-nm{white-space:nowrap}

.h2h-sec{margin-top:72px}
.h2h-p{margin:0 0 20px;max-width:76ch;font:400 17px/1.5 var(--display);color:var(--fx-ink);text-wrap:pretty}

/* How their runs end: the report's outcome bars, taller, with each part's count in it. */
.h2h-mix{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.h2h-mix li{display:grid;grid-template-columns:250px minmax(0,1fr);align-items:center;gap:16px}
.h2h-who>span{color:#fff}
.h2h-who .h2h-dot{margin-right:-2px}
/* grid-area:auto keeps insights-research.css's phone rule for the report's bars (.ir-mixbar{grid-area:bar}) off these
   bars: their row has no bar area, so the bar fell into a 35px column (pre-deploy review, 27 Oct). */
.h2h-mixbar{height:30px;border-radius:4px;grid-area:auto}
.h2h-mixbar .ir-m{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden}
.h2h-mixbar .ir-m span{font:600 12px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums}
.h2h-mixbar .ir-m--W span{color:#141414}

/* The measures, in one table: a row per measure under its group's name, the pair's values each over a short
   bar in its own colour, then all 15 models together. */
.h2h-measures{margin-top:72px}
/* No tabular figures: the values sit left, and in Visa Sans tabular figures widen the spaces too. */
.h2h-table{width:100%;border-collapse:collapse;font:400 15px/1.35 var(--display)}
.h2h-table th,.h2h-table td{padding:12px 24px 12px 0;text-align:left;vertical-align:top}
.h2h-table thead th{padding-bottom:12px;vertical-align:bottom;font:400 11px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--fx-caption)}
.h2h-table thead th:first-child{width:34%}
.h2h-table thead .ir-who>span{font:600 15px/1.25 var(--display);letter-spacing:0;text-transform:none}
.h2h-table .h2h-grp th{padding:28px 0 8px;font:400 12px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--fx-ink)}
.h2h-table tbody tr:not(.h2h-grp)>*{border-top:1px solid var(--fx-hair)}
.h2h-table tbody th[scope=row]{font-weight:400;color:#fff}
.h2h-m{display:block}
.h2h-dir{display:block;margin-top:5px;font:400 10.5px/1.3 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--fx-caption)}
.h2h-v>b{display:block;font:600 18px/1.1 var(--display);letter-spacing:-.01em;color:#fff}
/* Where one way is better, the other value steps back. */
.h2h-v.is-worse>b{color:var(--fx-caption)}
.h2h-bar{position:relative;display:block;max-width:200px;height:6px;margin-top:9px;border-radius:3px;background:rgba(255,255,255,.07)}
.h2h-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.h2h-v--a .h2h-bar i{background:var(--h2h-a)}
.h2h-v--b .h2h-bar i{background:var(--h2h-b)}
.h2h-table td.h2h-all{padding-top:14px;color:var(--fx-ink)}
.h2h-key{margin:16px 0 0;font:400 13px/1.45 var(--display);color:var(--fx-caption)}

/* Scenario by scenario, folded under the table. */
.h2h-more{margin-top:48px;border-top:1px solid var(--fx-hair-strong)}
.h2h-more>summary{display:flex;align-items:center;gap:12px;min-height:64px;cursor:pointer;list-style:none;font:700 20px/1.2 var(--display);letter-spacing:-.01em;color:#fff}
.h2h-more>summary::-webkit-details-marker{display:none}
.h2h-more>summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;border-right:1.5px solid var(--fx-ink);border-bottom:1.5px solid var(--fx-ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
.h2h-more[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.h2h-more>summary:hover::after{border-color:#fff}
.h2h-more>summary:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px}
.h2h-more[open]{padding-bottom:8px}
@media(prefers-reduced-motion:reduce){.h2h-more>summary::after{transition:none}}

/* Episode by episode. */
.h2h-eps{width:100%;border-collapse:collapse;font:400 14px/1.35 var(--display);font-variant-numeric:tabular-nums}
.h2h-eps th,.h2h-eps td{padding:9px 16px 9px 0;text-align:left;vertical-align:middle}
.h2h-eps thead th{padding-bottom:12px;vertical-align:bottom;font:400 11px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--fx-caption)}
.h2h-eps thead th:first-child{width:44%}
.h2h-eps thead .ir-who>span{font:600 14px/1.25 var(--display);letter-spacing:0;text-transform:none}
.h2h-eps tbody tr>*{border-top:1px solid var(--fx-hair)}
.h2h-eps tbody th{font-weight:400;color:#fff}
.h2h-eps tbody th small{display:block;margin-top:2px;font:400 10.5px/1.4 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--fx-caption)}
.h2h-eps .h2h-cat>*{padding-top:24px;border-top:0;font:400 12px/1.4 var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--fx-caption)}
.h2h-eps td{white-space:nowrap}
.h2h-runs{display:inline-flex;margin-right:10px;vertical-align:middle}
.h2h-eps td>b{font:600 15px/1 var(--display);color:var(--fx-caption)}
.h2h-eps td.is-more>b{color:#fff}
.h2h-watch{display:inline-flex;min-height:36px;margin-top:2px}
.h2h-runkey{margin:16px 0 0}
.h2h-runkey li{display:inline-flex;align-items:center}
.h2h-runkey .og-r{display:inline-grid;width:16px;height:16px;margin:0 8px 0 0;border-radius:3px}

@media(max-width:767px){
  .h2h-face{min-height:56px;padding:0 16px}
  .h2h-face b{font-size:17px}
  .h2h-vs{width:100%;text-align:center}
  .h2h-sel{flex-basis:100%;max-width:none}
  .h2h-take{padding:26px 24px 26px}
  .h2h-take li{font-size:16px}
  .h2h-sec,.h2h-measures{margin-top:56px}
  .h2h-mix li{grid-template-columns:1fr;gap:8px}
  /* Phones: each measure's name on its own line, the three values in a row under it. */
  .h2h-table thead tr,.h2h-table tbody tr:not(.h2h-grp){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
  /* The corner cell leaves the grid but not the row, so each value keeps its column's header. */
  .h2h-table thead th.h2h-corner{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .h2h-table thead th{width:auto;padding-right:0}
  /* The names wrap rather than clip; the dots still match each model's bars. */
  .h2h-table thead .ir-logo{display:none}
  .h2h-table thead .ir-who,.h2h-table thead .ir-who>span{min-width:0;white-space:normal;overflow:visible;text-overflow:clip}
  .h2h-table thead .ir-who{align-items:flex-start}
  .h2h-table thead .h2h-dot{margin-top:4px}
  .h2h-table tbody tr:not(.h2h-grp){padding:12px 0;border-top:1px solid var(--fx-hair)}
  .h2h-table tbody tr:not(.h2h-grp)>*{padding:0;border-top:0}
  .h2h-table tbody th[scope=row]{grid-column:1 / -1;margin-bottom:8px}
  .h2h-table td.h2h-all{padding-top:2px}
  .h2h-table .h2h-grp,.h2h-table .h2h-grp th{display:block}
  .h2h-v>b{font-size:16px}
  .h2h-eps thead th:first-child{width:auto}
  .h2h-eps th,.h2h-eps td{padding-right:10px}
  .h2h-runs{margin-right:6px}
}