/* company.css — the Company view (#company-view, built by company.js).
   Every class is prefixed cv-; every colour is a cockpit token from styles.css, so the
   view follows the light/dark switch with no second palette. Tables reuse the cockpit's
   own table.scanner rules and heat fills — this file only adds the layer, the header,
   the strip, the verdict, the chips and the footer rows. Dark theme first. */

/* ── the layer: fixed under the top nav, own scroll, above the tab content ── */
.cv-layer {
  position: fixed; left: 0; right: 0; bottom: 0; top: 96px;
  z-index: 45;                         /* above tab content; under nav menus (60), modals (90), tooltips (95) */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 0 12px 28px;
}
.cv-layer[hidden] { display: none; }
body.cv-open { overflow: hidden; }
/* 2026-10-27 (load time): the tab under the layer (Markets: ~21k elements) is fully covered, yet every layout the
   page forced re-laid it out — 0.4-0.6 s of each company open. content-visibility skips rendering it while the
   layer is up; scripts that measure inside it (Markets booting underneath) still get real sizes on demand. */
body.cv-open > main.panel { content-visibility: hidden; }
.cv-page { max-width: none; margin: 0; }          /* the full width of the screen: tables and charts use it */
.cv-num, .cv-page .v, .cv-page .n { font-variant-numeric: tabular-nums; }
.cv-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

/* ── sticky top bar: back · sub-nav · finder ── */
.cv-top {
  position: sticky; top: 0; z-index: 8;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 0 7px; background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.cv-btn {
  font: inherit; font-size: 12px; line-height: 1.3;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.cv-btn:hover { color: var(--accent); border-color: var(--accent); }
.cv-crumb { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.cv-crumb b { color: var(--text); }
.cv-subnav { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.cv-subnav button, .cv-chip {
  font: inherit; font-size: 12px; line-height: 1.3;
  background: none; color: var(--muted);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 2px 10px; cursor: pointer; white-space: nowrap;
}
.cv-subnav button:hover, .cv-chip:hover { color: var(--accent); border-color: var(--accent); }
.cv-subnav button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.cv-subnav .n { font-size: 11px; margin-left: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cv-subnav .n:empty { display: none; }
.cv-subnav button.on .n { color: rgba(255,255,255,.8); }
.cv-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.cv-chip.on .n { color: rgba(255,255,255,.8); }
.cv-chip .n { color: var(--muted); font-size: 11px; margin-left: 3px; }
.cv-chip[disabled] { opacity: .45; cursor: default; }
.cv-chip.cv-chip-sm { font-size: 11px; padding: 1px 8px; }

/* ── finder (typeahead) ── */
.cv-find { position: relative; margin-left: auto; }
.cv-find input {
  font: inherit; font-size: 12.5px; width: 250px; max-width: 70vw;
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel); color: var(--text);
}
.cv-find input:focus { outline: none; border-color: var(--accent); }
.cv-sug {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  width: 360px; max-width: 92vw;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28); padding: 4px;
}
.cv-sug[hidden] { display: none; }
.cv-sug-it {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 12.5px;
}
.cv-sug-it:hover, .cv-sug-it.on { background: var(--accent-soft); }
.cv-sug-it b { color: var(--accent); font-weight: 700; }
.cv-sug-it .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sug-it .mk { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cv-sug-empty { padding: 6px 8px; color: var(--muted); font-size: 12px; }
.cv-find.cv-find-add input { border-color: var(--accent); }

/* ── cards ── */
.cv-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-top: 10px;
}
.cv-card > h3, .cv-h3 {
  margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.cv-h3 .muted, .cv-card > h3 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cv-note { color: var(--muted); font-size: 12px; margin: 4px 0 0; line-height: 1.45; }
.cv-skel { color: var(--muted); font-size: 12px; padding: 14px 4px; }
.cv-skel::before { content: "…"; margin-right: 6px; }
.cv-empty { color: var(--muted); padding: 30px 6px; font-size: 13px; line-height: 1.6; }

/* ── header ── */
.cv-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; }
.cv-id h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; }
.cv-id h2 .wl-star { font-size: 17px; vertical-align: 1px; margin-left: 4px; }
.cv-tk {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 5px;
  font: 700 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent); background: var(--accent-soft); vertical-align: 2px;
}
.cv-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.cv-meta b { color: var(--text); font-weight: 600; }
.cv-meta .sep { margin: 0 5px; opacity: .6; }
.cv-share { margin-top: 5px; font-size: 12px; color: var(--muted); }
.cv-share a { color: var(--accent); cursor: pointer; text-decoration: none; }
.cv-share a:hover { text-decoration: underline; }
.cv-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cv-links a {
  font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; background: var(--bg);
}
.cv-links a:hover { border-color: var(--accent); }
.cv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; align-items: center; }
.cv-tags .lab { font-size: 11px; color: var(--muted); }

/* ── key-stat tiles ── */
.cv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 7px; margin-top: 10px; }
.cv-tile { border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px 7px; background: var(--bg); min-width: 0; }
.cv-tile .k { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-tile .v {
  font: 600 15px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cv-tile .v .chip { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 11.5px; }
.cv-tile .s { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-tile .s.wrap { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }   /* the rating tile's junk-notch line must read whole */

/* ── returns strip ── */
.cv-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.cv-strip .m {
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; min-width: 64px;
  display: flex; flex-direction: column; background: var(--panel);
}
.cv-strip .m .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cv-strip .m .v { font: 600 13.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.cv-strip .m.close .v { font-size: 15px; }
.cv-range { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 220px; border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; background: var(--panel); }
.cv-range .k { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cv-range .bar { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--grey-chip-bg); min-width: 80px; }
.cv-range .bar i { position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); }
.cv-range .t { font-size: 12px; white-space: nowrap; }
/* 52-week bar in prices (2026-10-28): low | close over the marker | high, distances on the right */
.cv-range.r52 { display: grid; grid-template-columns: auto minmax(110px, 1fr) auto auto; column-gap: 10px; row-gap: 1px; align-items: center; flex: 1 1 400px; padding: 4px 12px; }
.cv-range.r52 .hi { text-align: right; }
.cv-range.r52 .n { font: 600 13.5px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.cv-range.r52 .now { position: relative; height: 15px; }
.cv-range.r52 .now span { position: absolute; top: 0; font: 600 11.5px/15px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.cv-range.r52 .bar b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cv-range.r52 .t { grid-column: 4; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }
@media (max-width: 600px) {
  .cv-range.r52 { grid-template-columns: auto minmax(80px, 1fr) auto; }
  .cv-range.r52 .t { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; column-gap: 14px; padding: 3px 0 0; }
}

/* ── verdict ── */
.cv-verdict p { margin: 0 0 6px; line-height: 1.55; font-size: 13px; }
.cv-verdict p:last-child { margin-bottom: 0; }
.cv-verdict .lab { display: inline-block; min-width: 96px; font-weight: 700; color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.cv-verdict .rk { color: var(--muted); }
.cv-verdict .rk b { color: var(--text); }
.cv-verdict .cv-close { border-top: 1px solid var(--border); padding-top: 7px; margin-top: 8px; font-weight: 600; }
.cv-verdict .pos { color: var(--bull); }
.cv-verdict .neg { color: var(--bear); }

/* ── peer controls ── */
.cv-ctlrow { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; margin: 2px 0 6px; }
.cv-ctlrow .lab { font-size: 11px; color: var(--muted); margin-right: 2px; white-space: nowrap; }
.cv-ctlrow .gap { flex: 0 0 10px; }
.cv-peerline { font-size: 12.5px; margin: 2px 0 4px; }
.cv-peerline b { font-weight: 600; }
.cv-peerline .warn { color: var(--amber); }
.cv-lens { font: inherit; font-size: 12px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; max-width: 280px; }

/* ── the face table (table.scanner does the rest) ── */
/* bottom gutter: macOS overlay scrollbars paint over the last row (the Rank row) otherwise —
   the same fix the cockpit applies to #table-wrap (.has-hscroll) */
.cv-tablewrap { overflow-x: auto; margin-top: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); padding-bottom: 14px; }
table.cv-table { width: auto; min-width: 100%; }
table.cv-table th { cursor: pointer; }
table.cv-table td.cv-ctl, table.cv-table th.cv-ctl { width: 22px; min-width: 22px; padding: 4px 2px 4px 6px; text-align: center; }
.cv-rm { font: inherit; font-size: 11px; line-height: 1; background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px 3px; border-radius: 4px; opacity: .55; }
.cv-rm:hover { color: var(--bear); opacity: 1; background: var(--bear-bg); }
table.cv-table tr.cv-self > td { font-weight: 600; }
table.cv-table tr.cv-self > td.sticky-on,
table.cv-table tr.cv-self > td.cv-ctl { background: var(--accent-soft); }
table.cv-table tr.cv-self > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cv-selftag {
  display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); vertical-align: 1px;
}
table.cv-table tr.cv-add > td { color: var(--muted); }
table.cv-table tr.cv-foot > td {
  background: var(--thead); font-size: 12px; cursor: default;
  border-top: 1px solid var(--border);
}
table.cv-table tr.cv-foot.cv-med > td { border-top: 2px solid var(--border); }
table.cv-table tr.cv-foot > td.sticky-on { background: var(--thead); }
table.cv-table tbody tr.cv-foot:hover > td { background: var(--thead); box-shadow: none; }
.cv-foot .flab { font-weight: 700; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cv-rk { font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.cv-rk .of { color: var(--muted); font-weight: 400; }
.cv-rk.top { color: var(--accent); }
td.cv-win { position: relative; }
td.cv-win::after {
  content: ""; position: absolute; top: 5px; right: 2px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .9;
}
.cv-foot .muted { font-weight: 400; }

/* ── charts row under the table ── */
.cv-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.cv-chart { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; background: var(--bg); min-width: 0; }
.cv-chart .cv-h3 { margin-bottom: 4px; }
.cv-chart select { font: inherit; font-size: 11.5px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 1px 4px; max-width: 170px; }
.cv-chart .sel { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.cv-box { min-height: 120px; }
.cv-wait { color: var(--muted); font-size: 12px; padding: 30px 8px; text-align: center; border: 1px dashed var(--border); border-radius: 6px; }

/* ── bonds block ── */
.cv-bgrid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.35fr); gap: 10px; }
.cv-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.cv-pill { display: inline-flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--border); border-radius: 7px; padding: 3px 9px; background: var(--bg); min-width: 70px; }
.cv-pill .k { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cv-pill .v { font: 700 14px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.cv-pill .v.muted { font-weight: 400; }
.cv-bonds p { margin: 0 0 6px; font-size: 12.5px; line-height: 1.5; }
.cv-bonds .lastby .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0 2px; }
.cv-bonds .lastby p { margin: 0 0 2px; }
.cv-bonds .ag { display: inline-block; min-width: 54px; font-weight: 600; }
.cv-debt { font-size: 12.5px; margin-top: 8px; color: var(--muted); }
.cv-debt b { color: var(--text); font-weight: 600; }
.cv-bd-ig { color: var(--bull); }
.cv-bd-hy { color: var(--amber); }
.cv-bd-dist { color: var(--bear); }

/* ── caveats ── */
.cv-caveats { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.cv-caveats p { margin: 0 0 3px; }
.cv-caveats b { color: var(--text); font-weight: 600; }

/* ── nav button (injected after Markets) ── */
.nav-item.cv-nav .cv-nav-chip {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px;
  font: 600 10.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--grey-chip-bg); color: var(--grey-chip);
}
.nav-item.cv-nav.cv-on { background: var(--accent); color: #fff; font-weight: 600; }
.nav-item.cv-nav.cv-on .cv-nav-chip { background: rgba(255,255,255,.22); color: #fff; }
body.cv-open .nav-item.active[data-tab="rotation"] { background: var(--accent-soft); color: var(--accent); }

/* ── narrow screens ── */
@media (max-width: 900px) {
  .cv-charts, .cv-bgrid { grid-template-columns: 1fr; }
  .cv-find { margin-left: 0; flex: 1 1 100%; }
  .cv-find input { width: 100%; max-width: none; }
  .cv-sug { left: 0; right: auto; width: 100%; }
  .cv-crumb { max-width: 60vw; }
}
@media (max-width: 560px) {
  .cv-layer { padding: 0 8px 24px; }
  .cv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-verdict .lab { display: block; min-width: 0; }
  .cv-id h2 { font-size: 17px; }
}

/* in-view company links (other share-class lines, the line a bond family is filed under) */
.cv-page a[data-cvgo] { color: var(--accent); cursor: pointer; text-decoration: none; }
.cv-page a[data-cvgo]:hover { text-decoration: underline; }

/* ── sub-tabs (2026-09-25): header + strip on every tab, one pane per tab ── */
.cv-pane[hidden] { display: none !important; }
.cv-ovgrid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 10px; margin-top: 10px; align-items: stretch;   /* cards in a row share one height */
}
.cv-ovgrid > .cv-card { margin-top: 0; min-width: 0; }
.cv-ovgrid > .cv-card.cv-chart { background: var(--panel); border-radius: 8px; padding: 10px 12px; }
.cv-credit .cv-more { margin: 8px 0 0; font-size: 12.5px; }
.cv-credit .cv-more a, .cv-bondlist td.cv-bn a { color: var(--accent); text-decoration: none; cursor: pointer; }
.cv-credit .cv-more a:hover, .cv-bondlist td.cv-bn a:hover { text-decoration: underline; }
.cv-bondlist-wrap { margin-top: 10px; background: var(--panel); }
.cv-bondlist { width: 100%; }
.cv-bondlist td, .cv-bondlist th { white-space: nowrap; }
.cv-flag {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 9px;
  font-size: 10.5px; line-height: 16px; color: var(--muted); border: 1px solid var(--border);
}
.cv-flag.bear { color: var(--bear); border-color: var(--bear); }
@media (max-width: 1100px) {
  .cv-ovgrid { grid-template-columns: 1fr; }
}

/* ── peer-set explanations (2026-09-25): why the default set, and the co-movement numbers ── */
.cv-why { margin-top: 4px; font-size: 12px; color: var(--amber); }
.cv-rholine { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.cv-rholine a { color: var(--accent); cursor: pointer; text-decoration: none; }
.cv-rholine a:hover { text-decoration: underline; }
.cv-rholine b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-whyok { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* folded "+ How to read" / "+ Sources" blocks (2026-10-20; same look as the Backlog tab's + Notes & sources) */
.cv-more { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.cv-more > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cv-more > summary::-webkit-details-marker { display: none; }
.cv-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--text); letter-spacing: 0; }
.cv-more[open] > summary::before { content: "−"; }
.cv-more > summary:hover, .cv-more > summary:hover::before { color: var(--accent); border-color: var(--accent); }
.cv-more .cv-more-s { font-weight: 400; letter-spacing: 0; text-transform: none; }
.cv-more-b { margin-top: 5px; }
.cv-more-b p { margin: 0 0 4px; }
.cv-more-b b { color: var(--text); font-weight: 600; }