/* compare.css -- /compare/, the one table.
   Tokens only, both themes. Nothing here hardcodes a palette value, so light
   mode inherits without a second implementation.

   The face rules live here as much as in the markup. There is no positive or
   negative colour on this page and no ranking colour of any kind, because no
   column carries an intrinsic sign: a high claims percentage is a fact about a
   capital structure, not a bad mark. The single accent is orange on the CEBE
   column, which is the measure the page is named for. */

/* theme.css carries the colour tokens and nothing else, no body rule and no
   font stack, so a page that does not name its own typeface renders in the
   browser default serif. Every page here sets its own, and this one sets the
   canon: Inter for body, JetBrains Mono for every number. */
body { font-family: 'Inter', -apple-system, system-ui, sans-serif;
  background: var(--cebe-surface-page); color: var(--cebe-text-primary); line-height: 1.5; }

.cmp-wrap { max-width: 1400px; margin: 0 auto; padding: 28px 20px 64px; }

.cmp-head h1 { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--cebe-text-primary); }
.cmp-sub { color: var(--cebe-text-secondary); font-size: 1.3rem; line-height: 1.7; margin: 0 0 8px; max-width: 78ch; }

/* Basis. The most important furniture on the page: a table struck at one
   price is only honest if the price is on its face. */
.cmp-basis { background: var(--cebe-surface-card); border: 1px solid var(--cebe-border-solid);
  border-radius: 12px; padding: 16px 18px; margin: 22px 0 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.cmp-basis-pick { display: inline-flex; align-items: center; gap: 9px; }
.cmp-basis-pick > span { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cebe-text-secondary); }
.cmp-basis-pick select { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; padding: 7px 10px;
  background: var(--cebe-surface-page, transparent); color: var(--cebe-text-primary);
  border: 1px solid var(--cebe-border-solid); border-radius: 7px; }
/* The basis sentence gets its own full-width line rather than sitting beside
   the selector. It is the one thing on the page a reader must not miss, and a
   sentence to the right of a control is a sentence people skip. */
.cmp-basis-line { font-size: 1.25rem; color: var(--cebe-text-primary); line-height: 1.6; flex: 1 1 100%; }
.cmp-basis-line b { font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.cmp-basis-prov { font-family: 'JetBrains Mono', monospace; font-size: 0.98rem; color: var(--cebe-text-muted);
  flex: 1 1 100%; }
.cmp-basis-blocked { color: var(--cebe-text-secondary); }

/* Controls */
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 14px; }
.cmp-filters { display: inline-flex; gap: 4px; }
.cmp-fbtn { font-family: 'JetBrains Mono', monospace; font-size: 1.02rem; padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--cebe-text-secondary);
  border: 1px solid var(--cebe-border-solid); border-radius: 7px; }
.cmp-fbtn:hover:not([disabled]) { color: var(--cebe-text-primary); }
.cmp-fbtn.on { color: var(--cebe-text-primary); border-color: currentColor; }
.cmp-fbtn[disabled] { opacity: 0.45; cursor: default; }
.cmp-fbtn i { font-style: normal; color: var(--cebe-text-muted); margin-left: 4px; }
.cmp-search input { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; padding: 7px 11px; width: 190px;
  background: var(--cebe-surface-page, transparent); color: var(--cebe-text-primary);
  border: 1px solid var(--cebe-border-solid); border-radius: 7px; }
.cmp-actions { margin-left: auto; display: inline-flex; gap: 8px; }
.cmp-btn { font-family: 'JetBrains Mono', monospace; font-size: 1.02rem; padding: 6px 12px; cursor: pointer;
  background: transparent; color: var(--cebe-text-secondary);
  border: 1px solid var(--cebe-border-solid); border-radius: 7px; }
.cmp-btn:hover { color: var(--cebe-text-primary); }

/* The table. Wide content scrolls inside its own container; the page body
   never scrolls sideways, which is the repo's standing rule for wide tables
   and the fix the company pages took for the same problem. */
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--cebe-border-solid); border-radius: 12px;
  background: var(--cebe-surface-card); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 1.08rem; }

.cmp-table th { position: sticky; top: 0; z-index: 2; cursor: pointer; user-select: none;
  background: var(--cebe-surface-card); padding: 12px 12px; text-align: left; white-space: nowrap;
  font-family: 'JetBrains Mono', monospace; font-size: 0.96rem; font-weight: 600; letter-spacing: 0.05em;
  color: var(--cebe-text-secondary); border-bottom: 1px solid var(--cebe-border-solid); }
.cmp-table th.num { text-align: right; }
.cmp-table th.muted { color: var(--cebe-text-muted); }
.cmp-table th.accent { color: var(--cebe-brand-orange-text); }
.cmp-table th.sorted { color: var(--cebe-text-primary); }
.cmp-table th.accent.sorted { color: var(--cebe-brand-orange-text); }
.cmp-table th:hover { color: var(--cebe-text-primary); }
.cmp-table th i { font-style: normal; margin-left: 6px; opacity: 0.85; }
.cmp-table th:focus-visible { outline: 2px solid var(--cebe-brand-orange); outline-offset: -2px; }

.cmp-table td { padding: 11px 12px; white-space: nowrap; border-bottom: 1px solid var(--cebe-border-subtle, var(--cebe-border-solid));
  color: var(--cebe-text-primary); font-family: 'JetBrains Mono', monospace; }
.cmp-table td.num { text-align: right; }
.cmp-table td.muted { color: var(--cebe-text-muted); font-size: 0.98rem; }
.cmp-table td.accent { color: var(--cebe-text-primary); }
.cmp-table tbody tr:hover td { background: var(--cebe-surface-card-hover); }
.cmp-table tbody tr:last-child td { border-bottom: none; }

.cmp-co { display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; }
.cmp-co b { font-weight: 700; color: var(--cebe-text-primary); letter-spacing: 0.03em; }
.cmp-co span { font-family: Inter, system-ui, sans-serif; font-size: 0.95rem; color: var(--cebe-text-muted); }
.cmp-co:hover b { color: var(--cebe-brand-orange-text); }

.cmp-date { color: var(--cebe-text-muted); }
.cmp-src { display: inline-block; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  font-family: Inter, system-ui, sans-serif; }

/* An absent figure names its reason. The token is never a bare blank and
   never a bare dash: on a page whose proposition is that every figure traces
   to a filing, an empty cell reads as a measurement of zero. */
.cmp-na, .cmp-held { position: relative; color: var(--cebe-text-muted); border-bottom: 1px dotted currentColor; cursor: help; }
.cmp-held { color: var(--cebe-text-secondary); }
.cmp-why { position: absolute; right: 0; bottom: 130%; z-index: 5; display: none;
  min-width: 190px; max-width: 300px; padding: 8px 10px; white-space: normal; text-align: left;
  background: var(--cebe-surface-page, #09090b); color: var(--cebe-text-secondary);
  border: 1px solid var(--cebe-border-solid); border-radius: 7px;
  font-family: Inter, system-ui, sans-serif; font-size: 0.95rem; line-height: 1.45; }
.cmp-na:hover .cmp-why, .cmp-held:hover .cmp-why { display: block; }
tr.is-held td { opacity: 0.92; }

.cmp-mark { color: var(--cebe-text-muted); margin-left: 3px; cursor: help; }
.cmp-empty { color: var(--cebe-text-secondary); font-size: 1.15rem; margin: 16px 2px; }

/* Notes */
.cmp-notes-sec { margin-top: 34px; }
.cmp-notes-sec h2 { font-size: 1.5rem; font-weight: 700; color: var(--cebe-text-primary); margin: 0 0 14px; }
dl.cmp-notes { margin: 0; max-width: 82ch; }
dl.cmp-notes dt { font-family: 'JetBrains Mono', monospace; font-size: 1.0rem; letter-spacing: 0.05em;
  color: var(--cebe-text-primary); margin-top: 14px; }
dl.cmp-notes dd { margin: 5px 0 0; color: var(--cebe-text-secondary); font-size: 1.15rem; line-height: 1.65; }
dl.cmp-notes dd b { color: var(--cebe-text-primary); }
.cmp-src-line { margin-top: 20px; color: var(--cebe-text-muted); font-size: 1.02rem; line-height: 1.6; max-width: 82ch; }

.cmp-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
  background: var(--cebe-surface-card); color: var(--cebe-text-primary);
  border: 1px solid var(--cebe-border-solid); border-radius: 8px; padding: 9px 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 1.02rem;
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 60; }
.cmp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .cmp-wrap { padding: 20px 14px 52px; }
  .cmp-head h1 { font-size: 2.1rem; }
  .cmp-actions { margin-left: 0; }
  .cmp-search input { width: 150px; }
  /* The selector is the widest control on the page and ran past the card edge
     at a true 375 viewport. It wraps under its label and takes the width it
     has, rather than the width its longest option wants. */
  .cmp-basis-pick { flex-wrap: wrap; width: 100%; }
  .cmp-basis-pick select { width: 100%; max-width: 100%; }
  .cmp-table { font-size: 1.0rem; }
  .cmp-table td, .cmp-table th { padding: 9px 10px; }
  .cmp-src { max-width: 18ch; }
}