/* company_compare.css — Competitor Analysis Charts tab + verdict widgets (company_compare.js).
   Prefixed cmp-; colours are cockpit tokens (styles.css) plus five pin colours per theme. */
:root { --cmp-p1: #d9701a; --cmp-p2: #6d4fe0; --cmp-p3: #0d9488; --cmp-p4: #db2777; --cmp-p5: #a16207;
  --cmp-good: rgba(22, 163, 74, .075); --cmp-bad: rgba(220, 38, 38, .06); }
:root[data-theme="dark"] { --cmp-p1: #f59e42; --cmp-p2: #a78bfa; --cmp-p3: #2dd4bf; --cmp-p4: #f472b6; --cmp-p5: #facc15;
  --cmp-good: rgba(74, 222, 128, .07); --cmp-bad: rgba(248, 113, 113, .065); }

/* ═══ Charts tab ═══ */
#cv-cmp { position: relative; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.cmp-head h3 { margin: 0; }
.cmp-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-chip {
  font: inherit; font-size: 11.5px; line-height: 1.2; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--muted); border: 1px solid var(--border);
}
.cmp-chip:hover { color: var(--text); border-color: var(--muted); }
.cmp-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.cmp-pinbar {
  position: sticky; top: 42px; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin: 10px 0 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(6px);
}
.cmp-pinbar .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.cmp-pin {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, var(--border)); background: color-mix(in srgb, var(--c) 12%, transparent);
  font-size: 12px; font-weight: 600;
}
.cmp-pin.me { padding-right: 10px; }
.cmp-pin > i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.cmp-pin a { color: var(--text); text-decoration: none; cursor: pointer; }
.cmp-pin a:hover { text-decoration: underline; }
.cmp-pin b { color: var(--text); }
.cmp-pin button {
  font: inherit; font-size: 10px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 0; background: transparent; color: var(--muted);
}
.cmp-pin button:hover { background: var(--border); color: var(--text); }
.cmp-add, .cmp-ax select {
  font: inherit; font-size: 12px; color: var(--text); background: var(--bg); border: 1px dashed var(--border);
  border-radius: 999px; padding: 3px 8px; max-width: 230px; cursor: pointer;
}
.cmp-clear { font: inherit; font-size: 11.5px; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.cmp-clear:hover { color: var(--text); }
.cmp-hint { margin-left: auto; font-size: 11px; color: var(--muted); }

.cmp-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 12px; }
.cmp-panel {
  margin: 0; min-width: 0; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 8px; background: var(--panel);
  transition: border-color .15s, box-shadow .15s;
}
.cmp-panel:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 4px 18px rgba(0, 0, 0, .12); }
.cmp-panel[hidden] { display: none; }
.cmp-panel.cmp-na, .cmp-panel.cmp-off { display: none; }
.cmp-tipbox { position: relative; }
p.cmp-na { margin: 8px 2px 0; font-size: 11.5px; color: var(--muted); }
p.cmp-na[hidden] { display: none; }
.cmp-panel figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
.cmp-panel figcaption b { font-size: 13.5px; font-weight: 650; color: var(--text); }
.cmp-g {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent);
}
.cmp-panel.g-perf { --gc: var(--accent); }
.cmp-panel.g-fund { --gc: var(--cmp-p3); }
.cmp-panel.g-cap { --gc: var(--cmp-p1); }
.cmp-panel.g-bonds { --gc: var(--cmp-p2); }
.cmp-sub { flex-basis: 100%; font-size: 11.5px; color: var(--muted); }
.cmp-reset { margin-left: auto; font: inherit; font-size: 11px; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 0; }
.cmp-reset[hidden] { display: none; }
.cmp-ax { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); }
.cmp-ax .a { font-size: 8px; opacity: .7; }
.cmp-ax select { border-style: solid; border-color: transparent; background: transparent; color: var(--muted); padding: 1px 4px; font-size: 11.5px; max-width: 260px; }
.cmp-ax select:hover, .cmp-ax select:focus { border-color: var(--border); color: var(--text); background: var(--bg); }
.cmp-ay { margin-left: 34px; }
.cmp-axx { justify-content: flex-end; margin-top: -2px; }
.cmp-plot { position: relative; min-height: 250px; }
.cmp-note { min-height: 14px; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

.cmp-plot > .cmp-svg { max-width: 100%; height: auto; }   /* until a resize redraw lands, scale rather than overflow */
.cmp-svg { display: block; overflow: visible; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; }
.cmp-svg .cmp-grid { stroke: var(--border); stroke-width: 1; opacity: .55; }
.cmp-svg .cmp-grid.v { opacity: .3; }
.cmp-svg .cmp-grid.base { stroke: var(--muted); opacity: .6; stroke-dasharray: 2 3; }
.cmp-svg .cmp-frame { fill: none; stroke: var(--border); stroke-width: 1; }
.cmp-svg .cmp-tick { fill: var(--muted); font-size: 9.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .85; }
.cmp-svg .cmp-zero { stroke: var(--muted); stroke-width: 1; opacity: .45; }
.cmp-svg .cmp-med { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .75; }
.cmp-svg .cmp-diag { stroke: var(--amber); stroke-width: 1.4; stroke-dasharray: 6 4; }
.cmp-svg .cmp-qg { fill: var(--cmp-good); }
.cmp-svg .cmp-qb { fill: var(--cmp-bad); }
.cmp-svg .cmp-ql { font-size: 9px; font-weight: 700; letter-spacing: .07em; fill: var(--muted); opacity: .7; }
.cmp-svg .cmp-ql.good { fill: var(--bull); opacity: .8; }
.cmp-svg .cmp-ql.bad { fill: var(--bear); opacity: .75; }
.cmp-svg .cmp-empty { fill: var(--muted); font-size: 12px; }
.cmp-svg .cmp-dot { transition: opacity .12s; }
.cmp-svg .cmp-dot.peer { fill: var(--panel); stroke: var(--muted); stroke-width: 1.4; }
.cmp-svg .cmp-dot.pin { fill: var(--c); stroke: var(--panel); stroke-width: 1.5; }
.cmp-svg .cmp-dot.me { fill: var(--c); stroke: var(--panel); stroke-width: 2; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent)); }
.cmp-svg .cmp-lab { font-size: 9.5px; fill: var(--muted); pointer-events: none; transition: opacity .12s; }
.cmp-svg .cmp-lab.pin, .cmp-svg .cmp-lab.me { fill: var(--c); font-weight: 700; font-size: 10.5px; }
.cmp-svg .cmp-ln { fill: none; stroke-linejoin: round; stroke-linecap: round; transition: opacity .12s; }
.cmp-svg .cmp-ln.peer { stroke: var(--muted); stroke-width: 1; opacity: .28; }
.cmp-svg .cmp-ln.med { stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: .95; }
.cmp-svg .cmp-ln.pin { stroke: var(--c); stroke-width: 1.9; }
.cmp-svg .cmp-ln.me { stroke: var(--c); stroke-width: 2.6; }
.cmp-svg .cmp-end { font-size: 10px; font-weight: 700; fill: var(--c); font-variant-numeric: tabular-nums; }
.cmp-svg .cmp-end.med { font-weight: 500; }
.cmp-svg .cmp-xh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
/* linked hover: the hovered company everywhere, everything else faded */
[data-cmp-root].hovering .cmp-svg [data-s]:not(.hl) { opacity: .16; }
[data-cmp-root].hovering .cmp-svg .cmp-dot.me:not(.hl), [data-cmp-root].hovering .cmp-svg .cmp-dot.pin:not(.hl),
[data-cmp-root].hovering .cmp-svg .cmp-ln.me:not(.hl), [data-cmp-root].hovering .cmp-svg .cmp-ln.pin:not(.hl) { opacity: .5; }
.cmp-svg .cmp-dot.hl { stroke: var(--text); stroke-width: 2.4; }
.cmp-svg .cmp-dot.peer.hl { fill: var(--text); }
.cmp-svg .cmp-lab.hl { fill: var(--text); font-weight: 700; font-size: 11px; }
.cmp-svg .cmp-ln.peer.hl { stroke: var(--text); stroke-width: 2; opacity: 1; }
.cmp-pin.hl, #cmp-h2h th.hl { box-shadow: 0 0 0 2px var(--c) inset; }

.cmp-tip {
  position: absolute; z-index: 20; pointer-events: none; min-width: 170px; max-width: 320px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 11.5px; box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}
.cmp-tip[hidden] { display: none; }
.cmp-tip b { display: flex; align-items: center; gap: 6px; font-size: 12px; margin-bottom: 4px; }
.cmp-tip b i, .cmp-tip .r i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; margin-right: 5px; }
.cmp-tip b span { font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-tip .r { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; font-variant-numeric: tabular-nums; }
.cmp-tip .r > span:first-child { color: var(--muted); display: inline-flex; align-items: center; }
.cmp-tip em { font-style: normal; color: var(--muted); font-size: 10.5px; margin-left: 4px; }
.cmp-tip .h { margin-top: 4px; font-size: 10.5px; color: var(--accent); }

.cmp-h2h { margin-top: 14px; }
.cmp-tblwrap { max-width: 1180px; overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.cmp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cmp-tbl th, .cmp-tbl td { padding: 5px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.cmp-tbl th { position: sticky; top: 0; background: var(--panel); font-size: 12px; color: var(--text); }
.cmp-tbl th .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 0; }
.cmp-tbl th a { color: var(--text); cursor: pointer; text-decoration: none; }
.cmp-tbl th a:hover { text-decoration: underline; }
.cmp-tbl .m { text-align: left; color: var(--text); }
.cmp-tbl td.m .d { margin-left: 8px; font-size: 10px; color: var(--muted); opacity: .7; }
.cmp-tbl .md { color: var(--muted); }
.cmp-tbl td.best { font-weight: 700; color: var(--bull); }
.cmp-tbl tr.grp td { text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding-top: 7px; }
.cmp-tbl tbody tr:hover td, .cmp-tbl tr:not(.grp):hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cmp-foot { margin: 10px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.55; }

/* ═══ rank badge + strip (shared by the verdict and the table) ═══ */
.cmp-rk { display: inline-block; min-width: 38px; text-align: right; font-weight: 700; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cmp-rk i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 10.5px; }
.cmp-rk.t1 { color: var(--bull); }
.cmp-rk.t3 { color: var(--bear); }
.cmp-strip { position: relative; display: block; height: 18px; min-width: 70px; }
.cmp-strip::before {
  content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bear) 45%, transparent), color-mix(in srgb, var(--muted) 25%, transparent) 50%, color-mix(in srgb, var(--bull) 45%, transparent));
}
.cmp-strip.nodir::before, .cmp-strip.none::before { background: color-mix(in srgb, var(--muted) 30%, transparent); }
.cmp-strip i { position: absolute; top: 5px; width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: var(--muted); opacity: .55; }
.cmp-strip u { position: absolute; top: 2px; width: 2px; height: 15px; margin-left: -1px; background: var(--text); opacity: .75; text-decoration: none; }
.cmp-strip b {
  position: absolute; top: 3px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--accent);
}
.cmp-strip b.t1 { background: var(--bull); box-shadow: 0 0 0 1px var(--bull); }
.cmp-strip b.t3 { background: var(--bear); box-shadow: 0 0 0 1px var(--bear); }

/* ═══ verdict widgets ═══ */
.cmp-vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cmp-vhead h3 { margin: 0; }
.cmp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; flex: none; }
.cmp-seg button { font: inherit; font-size: 11px; padding: 3px 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.cmp-seg button.on { background: var(--accent); color: #fff; }
.cmp-v .cmp-vtext { display: none; }
.cmp-v.is-text .cmp-vtext { display: block; }
.cmp-v.is-text .cmp-vcards { display: none; }
.cmp-call {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 9px; margin-bottom: 10px;
  font-size: 13px; line-height: 1.45; border: 1px solid var(--border); border-left: 4px solid var(--tc);
  background: color-mix(in srgb, var(--tc) 9%, var(--panel)); --tc: var(--muted);
}
.cmp-call b { font-weight: 700; }
.cmp-call .ic { color: var(--tc); font-size: 13px; line-height: 1.45; }
.cmp-call.good { --tc: var(--bull); }
.cmp-call.warn { --tc: var(--amber); }
.cmp-call.bad { --tc: var(--bear); }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.cmp-card { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px 7px; background: var(--bg); min-width: 0; }
.cmp-ch { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cmp-ch .t { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.cmp-tier { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); --tc: var(--muted); }
.cmp-tier.good { --tc: var(--bull); }
.cmp-tier.bad { --tc: var(--bear); }
.cmp-i { color: var(--muted); font-size: 12px; cursor: help; }
.cmp-i:hover { color: var(--accent); }
.cmp-qvg { display: inline-flex; gap: 3px; }
.cmp-qvg i { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; color: var(--muted); border: 1px solid var(--border); }
.cmp-qvg i.good { color: var(--bull); border-color: color-mix(in srgb, var(--bull) 50%, var(--border)); }
.cmp-qvg i.bad { color: var(--bear); border-color: color-mix(in srgb, var(--bear) 50%, var(--border)); }
.cmp-vr {
  display: grid; grid-template-columns: minmax(84px, 1.05fr) minmax(66px, .8fr) minmax(80px, 1.5fr) 42px;
  align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); cursor: default;
}
.cmp-vr:first-of-type { border-top: 0; }
.cmp-vr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.cmp-vr .k { font-size: 12px; color: var(--muted); line-height: 1.25; }
.cmp-vr .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-vr .v small { display: block; font-size: 10.5px; font-weight: 400; color: var(--muted); }
.cmp-vr .v small * { color: inherit !important; }
.cmp-vr .pos, .cmp-bar .pos { color: var(--bull); }
.cmp-vr .neg, .cmp-bar .neg { color: var(--bear); }
.cmp-bars { display: grid; gap: 5px; margin: 2px 0 6px; }
.cmp-bar { display: grid; grid-template-columns: minmax(84px, 1.05fr) minmax(80px, 2.3fr) 76px; align-items: center; gap: 8px; }
.cmp-bar .k { font-size: 12px; color: var(--muted); }
.cmp-bar .k small { font-size: 10px; opacity: .8; }
.cmp-bar .tr { position: relative; height: 12px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 12%, transparent); }
.cmp-bar .tr .z { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--muted); }
.cmp-bar .tr .b { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; }
.cmp-bar .tr .b.need { background: var(--amber); }
.cmp-bar .tr .b.del { background: var(--accent); }
.cmp-bar .v { text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmp-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 0 6px; }
.cmp-kv > div { border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; }
.cmp-kv .k { display: block; font-size: 10.5px; color: var(--muted); }
.cmp-kv b { font-size: 15px; font-variant-numeric: tabular-nums; }
.cmp-pills { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 5px; }
.cmp-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--tc); background: color-mix(in srgb, var(--tc) 13%, transparent); --tc: var(--muted); }
.cmp-pill.good { --tc: var(--bull); }
.cmp-pill.warn { --tc: var(--amber); }
.cmp-pill.bad { --tc: var(--bear); }
.cmp-lens { font-size: 11.5px; color: var(--muted); margin: 0 0 6px; line-height: 1.4; }
.cmp-lens b { color: var(--text); }
.cmp-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12.5px; }
.cmp-rate .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cmp-rate .arr { color: var(--muted); }
.cmp-none { font-size: 12px; color: var(--muted); margin: 0 0 6px; line-height: 1.45; padding: 6px 8px; border: 1px dashed var(--border); border-radius: 7px; }
.cmp-none b { color: var(--text); }
.cmp-vleg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; font-size: 10.5px; color: var(--muted); }
.cmp-vleg b { color: var(--text); font-weight: 600; }
.cmp-strip.demo { width: 78px; min-width: 78px; display: inline-block; }
.cmp-strip.demo b { width: 10px; height: 10px; margin-left: -5px; top: 4px; }

/* the price-path panel takes two columns wherever the grid has two or more: 11 panels fill whole rows */
@media (min-width: 900px) { .cmp-panel[data-cmp-id="p-rel"] { grid-column: span 2; } }

/* the Overview Positioning chart on the cmp renderer */
.cmp-pos { min-height: 280px; }
.cmp-poskey { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.cmp-poskey .k { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; cursor: default; }
.cmp-poskey .k em { font-style: normal; font-weight: 400; color: var(--muted); }
.cmp-poskey .k i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.cmp-poskey .k.peer { color: var(--muted); font-weight: 400; }
.cmp-poskey .k.peer i { background: transparent; border: 1.4px solid var(--muted); width: 8px; height: 8px; }
.cmp-poskey .k.med { color: var(--muted); font-weight: 400; }
.cmp-poskey .k.med i { width: 14px; height: 0; border-radius: 0; border-top: 1px dashed var(--muted); background: none; }
.cmp-poskey .h { margin-left: auto; }
.cmp-poskey a { color: var(--accent); cursor: pointer; text-decoration: none; }
.cmp-poskey a:hover { text-decoration: underline; }
.cmp-poskey .k.hl { text-decoration: underline; }

/* the Overview positioning card links to the Charts tab */
.cv-page a.cmp-more { float: right; font-size: 11.5px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: none; }
.cv-page a.cmp-more:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .cmp-grid { grid-template-columns: 1fr; }
  .cmp-hint { display: none; }
  .cmp-pinbar { top: 0; position: static; }
  .cmp-vr { grid-template-columns: minmax(78px, 1fr) minmax(62px, .9fr) minmax(60px, 1.2fr) 38px; gap: 6px; }
}

/* phones: the Markets tables under the layer are wider than the screen and would widen the
   mobile layout viewport (the whole view then renders zoomed out) — clip them while it is open */
html:has(body.cv-open) { overflow-x: hidden; }

/* ═══ business profile (Overview, where Positioning was) + the header line ═══ */
.cv-one { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 5px 0 2px; font-size: 13px; line-height: 1.45; }
.cv-one:empty { display: none; }
.cv-one .t { color: var(--text); max-width: 900px; }
.cv-one .us { font-size: 11.5px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.cmp-biz { background: var(--panel); border-radius: 8px; padding: 10px 12px; grid-column: 1 / -1; }
/* Overview: relative performance and credit stack in the right column beside the (taller) verdict */
.cv-ovcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cv-ovcol > .cv-card { margin-top: 0; min-width: 0; }
.cv-ovcol > .cv-card.cv-chart { background: var(--panel); border-radius: 8px; padding: 10px 12px; }
.cv-ovcol > .cv-credit { flex: 1; }
.cmp-bhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cmp-bhead h3 { margin: 0; }
.cmp-conf { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 13%, transparent); --tc: var(--muted); }
.cmp-conf.h { --tc: var(--bull); }
.cmp-conf.m { --tc: var(--accent); }
.cmp-conf.l { --tc: var(--amber); }
.cmp-one { margin: 0 0 8px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--text); }
.cmp-more { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
/* the lead paragraph runs in the header row beside "Business", full card width: 1–2 lines on a desktop (was 3 under a 96ch cap) */
.cmp-bhead.lead { align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.cmp-bhead.lead h3 { flex: none; white-space: nowrap; }
.cmp-bhead.lead > p { flex: 1 1 0; min-width: 0; margin: 0; }
.cmp-bhead.lead > .cmp-conf { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .cmp-bhead.lead { flex-wrap: wrap; } .cmp-bhead.lead > p { order: 3; flex-basis: 100%; } }
.cmp-us { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 4px 10px 4px 4px; border-radius: 999px;
  font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.cmp-us span { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 999px; }
.cmp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; font-size: 11.5px; }
.cmp-chain span { padding: 2px 8px; border-radius: 5px; border: 1px solid var(--border); color: var(--muted); background: var(--bg); }
.cmp-chain span:last-child { color: var(--text); font-weight: 600; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.cmp-chain i { font-style: normal; color: var(--muted); }
.cmp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: 0 0 10px; }
.cmp-facts .f { display: grid; grid-template-columns: 18px 1fr; align-items: center; column-gap: 6px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); min-width: 0; }
.cmp-facts .f .cmp-ic { grid-row: span 2; color: var(--muted); }
.cmp-facts .f .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.cmp-facts .f b { font-size: 12.5px; font-variant-numeric: tabular-nums; line-height: 1.3; }
.cmp-ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cmp-bgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
@media (min-width: 1200px) { .cmp-bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cmp-bsec { border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px 8px; background: var(--bg); min-width: 0; }
.cmp-bl { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cmp-bl .cmp-ic { color: var(--accent); }
.cmp-bl em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .8; }
.cmp-bl .sl { opacity: .5; }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cmp-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); background: var(--panel); }
.cmp-tag.core { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); font-weight: 600; }
.cmp-tag.c { border-style: dashed; }
.cmp-tag.m { font-size: 11px; color: var(--muted); }
.cmp-moat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp-mw { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; color: var(--tc);
  background: color-mix(in srgb, var(--tc) 14%, transparent); --tc: var(--muted); }
.cmp-mw.wide { --tc: var(--bull); }
.cmp-mw.narrow { --tc: var(--amber); }
.cmp-meter { display: inline-flex; gap: 3px; margin-right: 4px; }
.cmp-meter i { width: 16px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 25%, transparent); }
.cmp-meter i.on.none { background: var(--muted); }
.cmp-meter i.on.narrow { background: var(--amber); }
.cmp-meter i.on.wide { background: var(--bull); }
.cmp-meter:has(i.on.narrow) i:first-child { background: var(--amber); }
.cmp-meter:has(i.on.wide) i { background: var(--bull); }
.cmp-why { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.cmp-cchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 3px 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); }
.cmp-cchip a { color: var(--text); cursor: pointer; text-decoration: none; }
.cmp-cchip a:hover { text-decoration: underline; }
.cmp-cchip a b { color: var(--accent); font-weight: 700; }
.cmp-cchip.inp { border-color: color-mix(in srgb, var(--bull) 45%, var(--border)); }
.cmp-cchip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bull); margin: 0 5px 0 2px; }
.cmp-cchip button { font: inherit; font-size: 12px; line-height: 1; width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; color: var(--muted); }
.cmp-cchip button:hover { background: var(--accent); color: #fff; }
.cmp-cchip.off { color: var(--muted); padding-right: 8px; border-style: dashed; }
.cmp-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.4; }
.cmp-ul li { display: flex; gap: 6px; align-items: baseline; }
.cmp-ul .b { font-style: normal; font-size: 9px; flex: none; }
.cmp-ul.rd .b { color: var(--accent); }
.cmp-ul.up .b { color: var(--bull); }
.cmp-ul.dn .b { color: var(--bear); }
.cmp-ud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cmp-near { display: grid; gap: 4px; }
.cmp-near .n { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: 12px; align-items: baseline; }
.cmp-near .n a { cursor: pointer; text-decoration: none; color: var(--accent); }
.cmp-near .n span { color: var(--muted); }
.cmp-bfoot { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.cmp-bfoot a { color: var(--accent); text-decoration: none; }
.cmp-bfoot a:hover { text-decoration: underline; }
.cmp-tip .o { margin: 3px 0 2px; font-size: 11px; color: var(--muted); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; white-space: normal; line-height: 1.35; }
@media (max-width: 760px) { .cmp-ud { grid-template-columns: 1fr; } .cmp-near .n { grid-template-columns: 76px 1fr; } }

.cmp-thin { margin: -4px 0 8px; font-size: 11.5px; color: var(--amber); line-height: 1.45; }

/* pin any company (2026-09-28): the pin box searches the whole Markets universe; a pin from
   outside the peer set is a guest — dashed, never in a median or a rank */
.cmp-pin.guest { border-style: dashed; background: transparent; }
.cmp-pin button.gx { font-size: 13px; font-weight: 700; color: var(--accent); }
.cmp-find { position: relative; display: inline-flex; }
input.cmp-add { cursor: text; width: 210px; outline: none; }
input.cmp-add:focus { border-style: solid; border-color: var(--accent); }
input.cmp-add:disabled { cursor: default; opacity: .6; }
.cmp-sugg {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 430px; max-width: calc(100vw - 32px);
  max-height: 340px; overflow-y: auto; padding: 4px; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel); box-shadow: 0 10px 28px rgb(0 0 0 / .35);
}
.cmp-sugg[hidden] { display: none; }
.cmp-sugg .hd { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 5px 8px 3px; }
.cmp-sugg .o {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) auto 34px; gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.cmp-sugg .o.on, .cmp-sugg .o:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cmp-sugg .o b { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sugg .nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-sugg .mt { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cmp-sugg em { font-style: normal; font-size: 10px; color: var(--accent); text-align: right; }
.cmp-sugg .none { padding: 8px; color: var(--muted); font-size: 12px; }
.cmp-tbl th .gx { display: block; font-size: 9px; font-weight: 500; letter-spacing: .03em; color: var(--muted); }

/* ═══ head to head (2026-09-29): companies as rows, metrics as columns, the Markets heat fill ═══ */
.cmp-h2hbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 6px; }
.cmp-h2hbar h3 { margin: 0; }
.cmp-h2hctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmp-h2hsum { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: var(--text); }
.cmp-h2hsum .up { color: var(--bull); }
.cmp-h2hsum .dn { color: var(--bear); }
.cmp-h2hsum .pn { white-space: nowrap; }
.cmp-h2hsum .pn::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 4px; vertical-align: 0; }
.cmp-h2h .cmp-tblwrap { max-width: none; }
.cmp-h2t th, .cmp-h2t td { padding: 4px 8px; }
.cmp-h2t th { position: static; font-size: 11px; font-weight: 600; color: var(--muted); vertical-align: bottom; }
.cmp-h2t tr.band th { text-align: center; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  background: var(--bg); border-bottom: 2px solid var(--gc, var(--border)); padding: 5px 8px 4px; --gc: var(--border); }
.cmp-h2t tr.band th.co { border-bottom-color: var(--border); }
.cmp-h2t .b-sc { --gc: var(--text); }
.cmp-h2t .b-perf { --gc: var(--accent); }
.cmp-h2t .b-fund { --gc: var(--cmp-p3); }
.cmp-h2t .b-cap { --gc: var(--cmp-p1); }
.cmp-h2t .b-bonds { --gc: var(--cmp-p2); }
.cmp-h2t tr.band th.gs { border-left: 1px solid var(--border); }
.cmp-h2t .gs { border-left: 1px solid color-mix(in srgb, var(--border) 80%, transparent); }
.cmp-h2t th.num { text-align: right; white-space: normal; min-width: 48px; max-width: 80px; line-height: 1.15; cursor: pointer; user-select: none; }
.cmp-h2t th.num:hover { color: var(--text); }
.cmp-h2t th.sorted { color: var(--accent); }
.cmp-h2t th .ar { font-style: normal; font-size: 8px; margin-left: 3px; }
.cmp-h2t td.num { text-align: right; }
.cmp-h2t td.sc { font-weight: 700; }
/* the company column stays put while the metrics scroll */
.cmp-h2t .co { position: sticky; left: 0; z-index: 1; background: var(--panel); text-align: left; min-width: 210px; max-width: 270px;
  overflow: hidden; text-overflow: ellipsis; box-shadow: inset -1px 0 0 var(--border); }
.cmp-h2t tr.band th.co, .cmp-h2t tr.hd th.co { background: var(--bg); z-index: 2; }
.cmp-h2t tr.hd th.co { background: var(--panel); font-weight: 700; color: var(--text); }
.cmp-h2t tr.hd th.co .muted { font-weight: 500; font-size: 10.5px; }
.cmp-h2t .co .rk { display: inline-block; width: 22px; margin-right: 5px; text-align: right; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.cmp-h2t .co .dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--accent)); margin-right: 7px; vertical-align: -1px; }
.cmp-h2t .co .dot.md { background: transparent; border: 1.5px dashed var(--muted); box-sizing: border-box; }
.cmp-h2t .co .pin { display: inline-block; width: 11px; height: 11px; padding: 0; margin: 0 7px 0 0; border-radius: 50%; border: 1.5px solid var(--muted);
  background: transparent; cursor: pointer; vertical-align: -1px; opacity: .5; box-sizing: border-box; }
.cmp-h2t .co .pin:hover { opacity: 1; border-color: var(--accent); }
.cmp-h2t .co .pin.on { background: var(--c); border-color: var(--c); opacity: 1; }
.cmp-h2t .co .pin[disabled] { cursor: not-allowed; opacity: .2; }
.cmp-h2t .co .tk { color: var(--text); text-decoration: none; font-weight: 600; }
.cmp-h2t .co a.tk { cursor: pointer; }
.cmp-h2t .co a.tk:hover { text-decoration: underline; }
.cmp-h2t .co .nm { display: inline-block; max-width: 128px; margin-left: 7px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  font-size: 11px; font-weight: 400; color: var(--muted); }
.cmp-h2t .co .gx { margin-left: 6px; font-size: 9px; font-weight: 500; color: var(--muted); border: 1px dashed var(--muted); border-radius: 4px; padding: 0 4px; }
.cmp-h2t tr.me td { font-weight: 700; }
.cmp-h2t tr.me td.co { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--border); }
.cmp-h2t tr.pinned td.co { box-shadow: inset 3px 0 0 var(--c), inset -1px 0 0 var(--border); }
.cmp-h2t tr.me td, .cmp-h2t tr.pinned td { border-top: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, transparent); }
.cmp-h2t tr.med td { font-style: italic; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border); }
.cmp-h2t tr.med td.co { background: var(--bg); }
.cmp-h2t tr.med .tk { font-weight: 600; color: var(--muted); }
.cmp-h2t tr:not(.band):not(.hd):not(.gm):hover td.co, .cmp-h2t tr.hl td.co { background: color-mix(in srgb, var(--c, var(--accent)) 13%, var(--panel)); }
.cmp-h2t tr.hl td { border-top: 1px solid var(--c, var(--text)); border-bottom: 1px solid var(--c, var(--text)); }
.cmp-h2hleg { margin: 8px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.cmp-h2hleg .sw { display: inline-block; width: 18px; height: 11px; vertical-align: -1px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.cmp-h2hleg .sw + .sw { border-left: 0; }
.cmp-h2hleg .sw:first-child { border-radius: 3px 0 0 3px; }
.cmp-h2hleg .sw:nth-child(5) { border-radius: 0 3px 3px 0; margin-right: 6px; }
@media (max-width: 760px) {
  .cmp-h2t .co { min-width: 120px; max-width: 150px; }
  .cmp-h2t .co .nm { display: none; }
}
/* frozen size columns beside the name (wide panes; .fz-on set by cmpH2hStick) + the market view */
.cmp-h2t th.txt, .cmp-h2t td.txt { text-align: left; }
.cmp-h2t td.fz:not(.co) { font-size: 12px; }
.cmp-h2t tr.band th.co { position: static; text-align: left; }
.cmp-h2t.fz-on tr.band th.co { position: sticky; left: 0; }
.cmp-h2t.fz-on .fz { position: sticky; z-index: 1; background: var(--panel); }
.cmp-h2t.fz-on tr.band th.fz { background: var(--bg); z-index: 2; }
.cmp-h2t.fz-on tr.hd th.fz { z-index: 2; }
.cmp-h2t .fzl { box-shadow: inset -1px 0 0 var(--border); }
.cmp-h2t tr.me td.fz:not(.co) { background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.cmp-h2t tr.med td.fz { background: var(--bg); }
.cmp-h2t.fz-on tr:not(.band):not(.hd):not(.me):not(.med):not(.gmed):hover td.fz:not(.co):not(.mk),
.cmp-h2t.fz-on tr.hl:not(.me) td.fz:not(.co) { background: color-mix(in srgb, var(--c, var(--accent)) 7%, var(--panel)); }
/* verdict line: the market mix under it */
.cmp-h2hsum .mix { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cmp-h2hsum .mix b { color: var(--text); font-weight: 600; }
.cmp-h2t .co { max-width: 290px; }
/* frozen Company + size columns on wide panes (cmpH2hStick sets the offsets by data-fz); the country
   lives in the company column (owner, 2026-09-29): the median row names it, or it prefixes the name */
.cmp-h2t { --cmp-medbg: color-mix(in srgb, #64748b 12%, var(--panel)); --cmp-medln: color-mix(in srgb, #64748b 50%, transparent); }
/* a country's first row carries the separator */
.cmp-h2t tr.g0 td { border-top: 2px solid var(--cmp-medln); }
/* median rows (all peers, and each country's): a plain grey band, bold italic values — company rows
   keep the heat fill, a median row only colours its text (green top third, red bottom third) */
.cmp-h2t tr.med td:not(.mk), .cmp-h2t tr.gmed td:not(.mk), .cmp-h2t tr.med:hover td:not(.mk), .cmp-h2t tr.gmed:hover td:not(.mk),
.cmp-h2t.fz-on tr.med td.fz:not(.mk), .cmp-h2t.fz-on tr.gmed td.fz:not(.mk) { background: var(--cmp-medbg); }
.cmp-h2t tr.med td { border-top: 2px solid var(--cmp-medln); border-bottom: 0; }
.cmp-h2t tr.med td:not(.co):not(.mk), .cmp-h2t tr.gmed td:not(.co):not(.mk) { font-style: italic; font-weight: 700; color: var(--text); }
.cmp-h2t tr.med .tk, .cmp-h2t tr.gmed .tk { color: var(--text); font-weight: 700; font-style: italic; }
.cmp-h2t tr.med .co .nm, .cmp-h2t tr.gmed .co .nm { font-style: normal; }
.cmp-h2t tr.gmed .up { color: var(--bull); }
.cmp-h2t tr.gmed .dn { color: var(--bear); }
/* column groups as on the Markets tables (owner, 2026-09-29): a coloured 2px rule down the full height
   at each group's first column + a small tag on its header (gate colours from styles.css) */
.cmp-h2t th.gate-start, .cmp-h2t td.gate-start { border-left: 2px solid var(--gate-c, var(--border)); }
.cmp-h2t th .gate-tag { display: block; width: max-content; margin: 0 auto 3px 0; padding: 1px 4px; border-radius: 3px; line-height: 1.2;
  font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gate-c); border: 1px solid var(--gate-c); opacity: .85; }
/* a blank row before every country; the country's first row keeps a light rule */
.cmp-h2t tr.gsp td, .cmp-h2t tr.gsp:hover td { height: 14px; padding: 0; border: 0; background: transparent !important; }
.cmp-h2t tr.g0 td { border-top: 1px solid var(--cmp-medln); }
@media (max-width: 760px) { .cmp-h2t th .gate-tag { display: none; } }
.cmp-h2t .co .ct { font-weight: 600; color: var(--text); opacity: .75; }
.cmp-h2t td.co[data-h2h-foldm] { cursor: pointer; }
.cmp-h2t td.co[data-h2h-foldm]:hover .tk { color: var(--accent); }
.cmp-h2t tr.gmed .co .rk { color: var(--muted); font-size: 9px; }
/* a country's median closes its group: a rule above it, like a subtotal */
.cmp-h2t tr.gmed td { border-top: 1px solid var(--cmp-medln); }

/* the official sector beside the name (2026-10-28): left-aligned, two short lines at most */
.cmp-h2t .sec { text-align: left; }
.cmp-h2t td.fz.sec { font-size: 11px; color: var(--muted); white-space: normal; min-width: 76px; max-width: 112px; line-height: 1.2; }
.cmp-h2t tr.me td.fz.sec { color: var(--text); }
.cmp-h2t tr.med td.fz.sec, .cmp-h2t tr.gmed td.fz.sec { font-weight: 500; color: var(--muted); }