/* The Compare page (compare.js): every company against every other, one dotted panel per chart. Builds
   on ../styles.css (frame, tokens), the chart kit's inspector and switches (../explore/lab/lab.css) and
   the company view's panels, keys, notes and bar (app.css). Colour stays in the marks; numbers and words
   wear the text tokens. */

/* ---------- the head: the eyebrow, the line, where it comes from */
.cmp-head { display: flex; flex-direction: column; gap: 14px; padding-block: 48px 32px; }
.cmp-head h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1; max-width: 16ch; }
.cmp-head .lab-deck { font-size: 17px; max-width: 68ch; }
.cmp-asof { margin: 0; font: 400 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }

/* ---------- the sector switch: a segmented switch that wraps in its box; a picker on a phone */
.cmp-filter { display: flex; align-items: center; gap: 10px 16px; padding-block: 18px; }
.cmp-filter-l { font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cmp-seg { display: flex; flex: 0 1 auto; min-width: 0; }
.cmp-pick { display: none; }
.cmp-n { flex: none; margin-left: auto; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
  .cmp-seg { display: none; }
  .cmp-pick { display: inline-flex; }
}

/* ---------- a key: a swatch, a dot or a tick each */
.cmp-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 400 11px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.cmp-key span { display: inline-flex; align-items: center; gap: 7px; }
.cmp-key i { width: 12px; height: 9px; border-radius: 2px; background: var(--c); }
.cmp-key i.tick { width: 2px; height: 13px; border-radius: 0; background: var(--text); }
.cmp-key svg { display: block; overflow: visible; }
.cmp-key svg circle { fill: color-mix(in oklab, var(--text) 16%, var(--chart-bg)); stroke: var(--muted); stroke-width: 1; }
.cmp-key svg circle.alt { fill: none; stroke: var(--text); stroke-width: 1.5; }
/* who a dollar chart leaves out, and why: one short line under its readout */
.cmp-out { margin: 0; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.cmp-out:empty { display: none; }

/* ---------- inside the charts */
.lab-svg .cmp-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; fill: var(--muted); }
.lab-svg .cmp-per { font-family: var(--mono); font-size: 10px; font-weight: 400; fill: var(--muted); }
.lab-svg .cmp-bar { fill: var(--c); }
.lab-svg .cmp-stem { stroke: var(--c); stroke-width: 1.5; }
.lab-svg .cmp-pop { fill: var(--c); stroke: var(--chart-bg); stroke-width: 2; }
.lab-svg .cmp-fcf { stroke: var(--text); stroke-width: 2; }
.lab-svg .cmp-hit { fill: transparent; cursor: pointer; }
.lab-svg .cmp-row { transition: opacity 0.15s; }
.lab-svg.focus .cmp-row:not(.on) { opacity: 0.35; }
.lab-svg.focus .cmp-row.on .t-name { font-weight: 600; }
/* bars grow in from the axis once in view, and again after the sector changes */
.cmp-bars .cmp-bar, .cmp-bars .cmp-stem { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms); }
.cmp-bars .cmp-pop, .cmp-bars .cmp-fcf, .cmp-bars .t-val { opacity: 0; transition: opacity 0.3s calc(var(--d, 0ms) + 420ms); }
.cmp-bars.on .cmp-bar, .cmp-bars.on .cmp-stem { transform: none; }
.cmp-bars.on .cmp-pop, .cmp-bars.on .cmp-fcf, .cmp-bars.on .t-val { opacity: 1; }
/* the scatter: a dot per company in its colour, a ring of the chart's own colour so overlaps stay apart;
   hover rings one dot and fades the rest */
.lab-svg .cmp-dot { fill: color-mix(in oklab, var(--c) 82%, var(--chart-bg)); stroke: var(--chart-bg); stroke-width: 1.5; transition: opacity 0.15s; }
.lab-svg .cmp-dots.focus .cmp-dot:not(.on) { opacity: 0.28; }
/* a company in another currency: hollow and of one size, so it reads as no dollar revenue */
.lab-svg .cmp-dot.alt { fill: var(--chart-bg); stroke: var(--c); stroke-width: 1.75; }
.lab-svg .cmp-ring { fill: none; stroke: var(--text); stroke-width: 1.5; }
.lab-svg .cmp-lab { font-size: 10.5px; }
.lab-svg.cmp-sc { cursor: crosshair; }
.lab-svg.cmp-sc.hot { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .cmp-bars .cmp-bar, .cmp-bars .cmp-stem { transform: none; transition: none; }
  .cmp-bars .cmp-pop, .cmp-bars .cmp-fcf, .cmp-bars .t-val { opacity: 1; transition: none; }
}

/* ---------- the league tables: rows on dotted rules, figures right-aligned in tabular figures, the
   sorted column in ink. The table scrolls sideways in its own box, the names pinned at its left */
.cmp-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border-top: 1px dotted var(--guide); }
.cmp-wrap:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13px/1.3 var(--sans); }
.cmp-table th, .cmp-table td { padding: 8px 10px; border-bottom: 1px dotted var(--guide); white-space: nowrap; text-align: left; vertical-align: middle; }
.cmp-table thead th { padding: 0; vertical-align: bottom; font-weight: 400; }
.cmp-table thead button { appearance: none; display: inline-flex; align-items: flex-end; gap: 5px; width: 100%; min-height: 40px; padding: 10px 10px 8px; border: 0; background: none; color: var(--muted); font: 400 10.5px/1.25 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; white-space: normal; cursor: pointer; }
.cmp-table thead .num button { justify-content: flex-end; text-align: right; }
.cmp-table thead button:hover { color: var(--text); }
.cmp-table thead button:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.cmp-table thead .on button { color: var(--text); }
/* the sort's direction: a small arrow by the heading in use */
.cmp-table thead button i { flex: none; width: 0; height: 0; margin-bottom: 3px; border: 3.5px solid transparent; opacity: 0; }
.cmp-table thead [aria-sort="descending"] button i { opacity: 1; border-top: 5px solid currentColor; border-bottom-width: 0; }
.cmp-table thead [aria-sort="ascending"] button i { opacity: 1; border-bottom: 5px solid currentColor; border-top-width: 0; }
.cmp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table td.num { min-width: 7ch; }
.cmp-table td.on { color: var(--text); font-weight: 600; }
.cmp-table td.none { color: var(--muted); }
.cmp-table td small { margin-left: 5px; font: 400 9.5px/1 var(--mono); color: var(--muted); }
.cmp-table td.cmp-per { font: 400 11px/1.3 var(--mono); color: var(--muted); }
.cmp-table thead th.cmp-per { width: 1%; }
.cmp-table tbody tr:hover > * { background: color-mix(in srgb, var(--text) 4%, var(--bg)); }
/* the line before the companies in other currencies, when a column of amounts is sorted */
.cmp-table tr.cmp-sep td { padding: 14px 10px 6px; font: 400 10.5px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--bg); }
.cmp-table tr.cmp-sep span { position: sticky; left: 10px; display: inline-block; }
.cmp-table tbody tr.cmp-sep:hover > * { background: var(--bg); }
/* the company: its rank, badge, name and ticker, pinned while the figures scroll under it */
.cmp-table .cmp-co { position: sticky; left: 0; z-index: 1; background: var(--bg); border-right: 1px dotted var(--guide); }
.cmp-table thead .cmp-co { z-index: 2; }
.cmp-table tbody .cmp-co { padding-block: 6px; font-weight: 400; }
.cmp-co a { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.cmp-co a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.cmp-co a:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.cmp-rank { flex: none; width: 2.4ch; font: 400 10.5px/1 var(--mono); font-style: normal; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.cmp-co .badge { width: 26px; height: 26px; border-radius: 6px; }
.cmp-co .badge svg { width: 15px; height: 15px; }
.cmp-co .badge.wide svg { width: 21px; }
.cmp-co .badge.mono { font-size: 9px; }
.cmp-name { display: flex; flex-direction: column; gap: 2px; }
.cmp-co b { display: block; font: 500 13.5px/1.2 var(--sans); max-width: 17ch; overflow: hidden; text-overflow: ellipsis; }
.cmp-co small { font: 400 10.5px/1.2 var(--mono); color: var(--muted); }
.cmp-co small.p { display: none; }
.cmp-more:empty { display: none; }
.cmp-more-b { height: 30px; padding: 0 12px; border: var(--line) solid var(--stroke-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; }
.cmp-more-b:hover { border-color: var(--text); }
.cmp-more-b:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- how it is built: one closed note at the end */
.cmp-src { padding-block: 20px 24px; }
.cmp-method summary { cursor: pointer; font: 400 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cmp-method summary:hover { color: var(--text); }
.cmp-method ul { margin: 12px 0 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 8px; font: 400 11px/1.6 var(--mono); color: var(--muted); max-width: 120ch; }
.cmp-method b { color: var(--text); font-weight: 500; }

/* ---------- the sector bar under the nav (the company bar's frame, app.css): its picker's list hangs out
   of it, so while the bar is in view it does not clip */
.cmp-sbar.on { overflow: visible; }
.cmp-sbar .co-bar-t { margin-left: 4px; }
.cmp-sbar .pick-btn { height: 26px; }
#cmp > section[id] { scroll-margin-top: 46px; }

@media (max-width: 960px) { .cmp-head { padding-block: 36px 24px; } }
@media (max-width: 560px) {
  .cmp-head .lab-deck { font-size: 15px; }
  .cmp-table th, .cmp-table td { padding: 7px 8px; }
  .cmp-table thead button { padding: 9px 8px 7px; }
  /* on a phone the period rides under the name, pinned with it, in place of the ticker and its own column */
  .cmp-table .cmp-per { display: none; }
  .cmp-co small.t { display: none; }
  .cmp-co small.p { display: block; }
  .cmp-co a { gap: 7px; }
  .cmp-co b { max-width: 10ch; font-size: 13px; }
  .cmp-co .badge { width: 22px; height: 22px; border-radius: 5px; }
  .cmp-co .badge svg { width: 13px; height: 13px; }
  .cmp-co .badge.wide svg { width: 18px; }
  .cmp-rank { width: 2ch; }
}