/* Companies page (/companies/): the sector constellation over the bento layer, and the company profile dialog.
   Every rule is scoped under .cx-page; every class and id of the page starts with cx-. No inline styles: the script
   sets the company colour (--cx-c), the bar widths (--cx-w) and the twinkle delays (--cx-d) through CSSOM. */

.cx-page {
  --cx-k-live: #7FE0B0;
  --cx-k-due: #F5D18A;
  --cx-k-backfill: #EFAABB;
  --cx-k-confirmed: #81C9E8;
  --cx-k-expected: rgba(129, 201, 232, .55);
  --cx-k-undated: rgba(129, 201, 232, .28);
  --cx-k-no_report: #FF8F80;
  --cx-k-waiting_engine: #B7A6F2;
  --cx-k-unknown: rgba(236, 238, 246, .2);
  --cx-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  padding-bottom: 24px;
}
.cx-page .cx-k-live { --k: var(--cx-k-live); }
.cx-page .cx-k-due { --k: var(--cx-k-due); }
.cx-page .cx-k-backfill { --k: var(--cx-k-backfill); }
.cx-page .cx-k-confirmed { --k: var(--cx-k-confirmed); }
.cx-page .cx-k-expected { --k: var(--cx-k-expected); }
.cx-page .cx-k-undated { --k: var(--cx-k-undated); }
.cx-page .cx-k-no_report { --k: var(--cx-k-no_report); }
.cx-page .cx-k-waiting_engine { --k: var(--cx-k-waiting_engine); }
.cx-page .cx-k-unknown { --k: var(--cx-k-unknown); }

/* ------------------------------------------------------------------ head */
.cx-page .cx-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px 40px; align-items: end;
  padding-top: 24px; padding-bottom: 8px;
}
/* No kicker above the title, as on every page: the title stands 24 px under the head like the site's page titles. */
.cx-page .cx-h1 { font-size: 56px; line-height: 1.05; margin-top: 24px; }
.cx-page .cx-lede { color: var(--text-2); font-size: 15px; line-height: 1.6; text-align: center; max-width: 64ch; justify-self: center; padding-bottom: 8px; }
.cx-page .cx-search { justify-self: end; width: 100%; max-width: 340px; padding-bottom: 2px; }
.cx-page .cx-searchbox {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--glass); transition: border-color .15s ease;
}
.cx-page .cx-searchbox:focus-within { border-color: rgba(245, 209, 138, .6); }
.cx-page .cx-search-i { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.4; }
.cx-page .cx-q { flex: 1; min-width: 0; height: 46px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14.5px; outline: none; }
.cx-page .cx-q::placeholder { color: var(--faint); }
.cx-page .cx-q::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }

/* ------------------------------------------------------------------ switch and controls */
.cx-page .cx-swbar { display: flex; justify-content: center; margin-top: 16px; }
.cx-page .cx-sw { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.cx-page .cx-sw-b, .cx-page .cx-seg-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-family: var(--font-cond); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  transition: background-color .2s ease, color .2s ease;
}
.cx-page .cx-sw-b svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cx-page .cx-sw-b:hover, .cx-page .cx-seg-b:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.cx-page .cx-sw-b[aria-pressed="true"], .cx-page .cx-seg-b[aria-pressed="true"] { background: var(--gold); color: var(--space-0); }
.cx-page .cx-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px 24px; align-items: center; margin-top: 16px; margin-bottom: 16px; }
.cx-page .cx-ctrl-r { justify-self: end; }
.cx-page .cx-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.cx-page .cx-seg-b { padding: 0 16px; }
.cx-page .cx-seg-w, .cx-page .cx-wide { white-space: pre; }
.cx-page .cx-seg-b { white-space: nowrap; }
.cx-page .cx-seg-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0; opacity: .7; }
.cx-page .cx-sel { font-size: 15px; color: var(--text-2); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; }
.cx-page .cx-sel b { font-weight: 500; color: var(--text); font-size: 20px; letter-spacing: -.01em; }
.cx-page .cx-clear { min-height: 44px; padding: 0 12px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.cx-page .cx-clear:hover { color: var(--text); }
.cx-page .cx-sortbox { display: inline-flex; position: relative; }
.cx-page .cx-sortbox::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.4px solid var(--text-2); border-bottom: 1.4px solid var(--text-2);
  transform: rotate(45deg); pointer-events: none;
}
.cx-page .cx-select {
  appearance: none; -webkit-appearance: none; min-height: 48px; padding: 0 46px 0 18px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--glass); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.cx-page .cx-select option { background: #0B0C26; color: var(--text); }

/* ------------------------------------------------------------------ hero: sides and the constellation */
.cx-page .cx-hero { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 320px); gap: var(--gap); align-items: stretch; }
.cx-page .cx-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.cx-page .cx-side > .cx-panel:last-child { flex: 1; }
.cx-page .cx-panel {
  background: var(--cx-panel-bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 0;
}
.cx-page .cx-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; margin-bottom: 8px; }
.cx-page .cx-count { flex: none; white-space: nowrap; }
.cx-page .cx-ph { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-page .cx-ph-sub { color: var(--muted); letter-spacing: .12em; }
.cx-page .cx-all {
  min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); position: relative;
}
.cx-page .cx-all::before { content: ""; position: absolute; inset: 7px 0; border: 1px solid var(--line-2); border-radius: 999px; transition: border-color .15s ease; }
.cx-page .cx-all:hover { color: var(--text); }
.cx-page .cx-all[aria-pressed="true"] { color: var(--gold); }
.cx-page .cx-all[aria-pressed="true"]::before { border-color: rgba(245, 209, 138, .55); }
.cx-page .cx-rows { display: flex; flex-direction: column; gap: 1px; }
.cx-page .cx-row {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 44px; padding: 4px 10px;
  border-radius: 10px; text-align: left; font-size: 14px; color: var(--text-2); transition: background-color .15s ease, color .15s ease;
}
.cx-page .cx-row:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.cx-page .cx-row[aria-pressed="true"] { background: rgba(245, 209, 138, .1); color: var(--gold); }
.cx-page .cx-row-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-page .cx-row-n { font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: var(--text); }
.cx-page .cx-row[aria-pressed="true"] .cx-row-n { color: var(--gold); }
.cx-page .cx-idx { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); margin-right: 10px; }
.cx-page .cx-bar { grid-column: 1 / -1; height: 3px; margin-top: 5px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cx-page .cx-bar i { display: block; height: 100%; width: var(--cx-w, 0%); background: linear-gradient(90deg, var(--gold), rgba(245, 209, 138, .5)); border-radius: 2px; transition: width .3s ease; }
.cx-page .cx-regions .cx-row { padding-top: 7px; padding-bottom: 6px; }
.cx-page .cx-filers { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 20px; }
.cx-page .cx-filer { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.cx-page .cx-filers b { font-size: 22px; line-height: 1.1; color: var(--text); }

/* season gauge */
.cx-page .cx-season { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px 16px; align-items: center; }
.cx-page .cx-fine { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.5; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.cx-page .cx-gauge { position: relative; width: 112px; height: 112px; }
.cx-page .cx-gauge svg { width: 112px; height: 112px; }
.cx-page .cx-g-track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 12; }
.cx-page path.cx-g { fill: var(--k); }
.cx-page circle.cx-g { stroke: var(--k); }
.cx-page .cx-gauge-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cx-page .cx-gauge-c b { font-size: 30px; line-height: 1; }
.cx-page .cx-gauge-c span { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.cx-page .cx-legend-l { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.cx-page .cx-legend-l li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.cx-page .cx-lg-t { min-width: 0; line-height: 1.3; }
.cx-page .cx-legend-l b { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--text); }
.cx-page .cx-sw-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }

/* next to report: a row of four under the constellation */
.cx-page .cx-next-p { grid-column: 1 / -1; }
.cx-page .cx-next-l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cx-page .cx-next-b {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 52px; padding: 6px 10px;
  border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; text-align: left; transition: border-color .15s ease, background-color .15s ease;
}
.cx-page .cx-next-b:hover { border-color: var(--line-2); background: rgba(255, 255, 255, .06); }
.cx-page .cx-next-n { min-width: 0; display: flex; flex-direction: column; }
.cx-page .cx-next-n b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-page .cx-next-n small { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.cx-page .cx-next-d { font-family: var(--font-mono); font-size: 11.5px; color: var(--text); text-align: right; display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.cx-page .cx-next-d small { font-size: 10px; color: var(--muted); }
.cx-page .cx-next-d.cx-est small { color: var(--rose); }
.cx-page .cx-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13px; color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(245, 209, 138, .5); text-underline-offset: 4px; }
.cx-page .cx-link:hover { color: var(--gold); }
.cx-page .cx-arrow { text-decoration: none; }
.cx-page .cx-empty { font-size: 13px; color: var(--muted); padding: 8px 0; }

/* the constellation */
.cx-page .cx-stage { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.cx-page .cx-stage::before {
  content: ""; position: absolute; left: 50%; top: 0; height: 18%; width: 1px; background: linear-gradient(180deg, rgba(245, 209, 138, .3), rgba(245, 209, 138, 0));
  pointer-events: none;
}
.cx-page .cx-stage-n { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.cx-page .cx-stage-n b { font-family: var(--font-sans); font-size: 26px; color: var(--text); margin-right: 4px; }
.cx-page .cx-orbit-box { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; container-type: inline-size; }
.cx-page .cx-const { width: 100%; height: auto; aspect-ratio: 900 / 720; max-width: 820px; margin: 0 auto; overflow: visible; }
.cx-page .cx-orbit-c { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.cx-page .cx-drift { stroke-dasharray: 2 7; }
.cx-page .cx-inner { stroke: rgba(245, 209, 138, .14); fill: rgba(10, 11, 34, .35); }
.cx-page .cx-spoke { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.cx-page .cx-disc { cursor: pointer; outline: none; }
.cx-page .cx-disc-b { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .13); stroke-width: 1.2; transition: fill .2s ease, stroke .2s ease; }
.cx-page .cx-disc:hover .cx-disc-b, .cx-page .cx-disc.cx-hint .cx-disc-b { stroke: rgba(245, 209, 138, .55); fill: rgba(245, 209, 138, .05); }
.cx-page .cx-disc.cx-on .cx-disc-b { stroke: var(--gold); stroke-width: 2; fill: rgba(245, 209, 138, .1); }
.cx-page .cx-disc:focus-visible .cx-disc-b { stroke: var(--gold); stroke-width: 3.5; }
.cx-page .cx-disc-i { fill: var(--faint); font-family: var(--font-mono); font-size: 13px; pointer-events: none; }
.cx-page .cx-star { stroke: rgba(4, 5, 13, .55); stroke-width: 1; cursor: pointer; transition: opacity .25s ease, r .2s ease, stroke .2s ease; }
.cx-page .cx-narrow .cx-star:not(.cx-lit) { opacity: .14; }
.cx-page .cx-star.cx-deep { stroke: rgba(236, 238, 246, .6); }
.cx-page .cx-star:hover, .cx-page .cx-star.cx-hov { r: 7.5px; stroke: #FFFFFF; stroke-width: 1.6; }
.cx-page .cx-sec-l { fill: var(--muted); font-family: var(--font-cond); font-weight: 500; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: fill .2s ease; }
.cx-page .cx-sec-l:hover { fill: var(--text); }
.cx-page .cx-sec-l.cx-on { fill: var(--gold); }
.cx-page .cx-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30cqw, 250px); display: flex; flex-direction: column; align-items: center;
  text-align: center; pointer-events: none; gap: 2px;
}
.cx-page .cx-core-k { font-size: 10.5px; color: var(--text-2); }
.cx-page .cx-core-n { font-size: clamp(40px, 12.5cqw, 96px); line-height: .95; }
.cx-page .cx-core-s { font-size: 13.5px; color: var(--text-2); }
.cx-page .cx-core-m { font-family: var(--font-mono); font-size: 11px; color: var(--gold); margin-top: 6px; white-space: nowrap; }
.cx-page .cx-core-name { font-size: 17px; font-weight: 500; line-height: 1.25; margin-top: 8px; }
.cx-page .cx-stage-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.cx-page .cx-legend { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.cx-page .cx-lg-star { width: 9px; height: 9px; border-radius: 50%; background: conic-gradient(var(--sky), var(--rose), var(--gold), var(--up), var(--sky)); }
.cx-page .cx-lg-disc { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--line-2); margin-left: 10px; }

/* ------------------------------------------------------------------ bento layer */
/* The hand-off: the axis line and "Browse sectors and companies", the same anatomy as the Cards page's. */
.cx-page .cx-handoff { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 0; }
.cx-page .cx-handoff::before, .cx-page .cx-handoff::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 209, 138, .45)); }
.cx-page .cx-handoff::after { background: linear-gradient(90deg, rgba(245, 209, 138, .45), transparent); }
.cx-page .cx-go {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--glass);
  font-family: var(--font-cond); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); transition: border-color .2s ease, color .2s ease;
}
.cx-page .cx-go:hover, .cx-page .cx-go:focus-visible { border-color: var(--gold); color: var(--gold); }
.cx-page .cx-bento { scroll-margin-top: 24px; outline: none; }
/* One head for the tiles and the directory: the title (with the way back) at left, the count at right. */
.cx-page .cx-bhead { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 16px; min-height: 44px; }
.cx-page .cx-bhead-l { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cx-page .cx-bh { font-family: var(--font-cond); font-weight: 500; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cx-page .cx-bcount { flex: none; white-space: nowrap; }
.cx-page .cx-back {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 13px; color: var(--text-2); transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.cx-page .cx-back:hover { color: var(--gold); border-color: rgba(245, 209, 138, .5); background: rgba(255, 255, 255, .04); }
.cx-page .cx-more { display: flex; justify-content: center; margin-top: 24px; }
/* "Show more" is the site's gold pill (.more-pill in site.css), as on the Calendar and Cards pages. */
.cx-page .cx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cx-page .cx-tile {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; text-align: left; border-radius: var(--radius);
  background: var(--cx-panel-bg); border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.cx-page .cx-tile:hover { border-color: rgba(245, 209, 138, .45); }
.cx-page .cx-tile.cx-on { border-color: var(--gold); }
.cx-page .cx-tile.cx-off { opacity: .5; }
.cx-page .cx-tile-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; }
.cx-page .cx-tile-name { min-width: 0; font-family: var(--font-cond); font-weight: 500; font-size: 13px; line-height: 1.35; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-page .cx-tile-name .cx-idx { letter-spacing: 0; }
.cx-page .cx-tile-n { font-size: 34px; line-height: 1; color: var(--text); }
/* Two rows of six chips at most (the twelfth counts the rest); the two rows are kept so every tile has one anatomy. */
.cx-page .cx-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 20px; gap: 4px; align-content: start; min-height: 44px; flex: 1; }
.cx-page .cx-chip {
  display: inline-grid; place-items: center; min-width: 0; height: 20px; padding: 0 2px; border-radius: 4px; font-style: normal; overflow: hidden; white-space: nowrap;
  font-family: var(--font-cond); font-weight: 600; font-size: 10px; letter-spacing: .02em; background: var(--cx-c); color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.cx-page .cx-chip.cx-ink-dark { color: #04050D; }
.cx-page .cx-chip.cx-chip-more { background: rgba(255, 255, 255, .06); color: var(--text-2); font-family: var(--font-mono); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-2); }
.cx-page .cx-tile-foot { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.cx-page .cx-tile-foot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-page .cx-tile-foot > span:last-child { color: var(--text-2); }
.cx-page .cx-tile-all { background: linear-gradient(160deg, rgba(245, 209, 138, .09), rgba(255, 255, 255, .02)); }
/* The regions of the list on the All tile: each figure with its name on one line, the line wrapping between them. */
.cx-page .cx-tile-big { display: flex; flex-wrap: wrap; gap: 4px 16px; align-content: start; min-height: 44px; flex: 1; }
.cx-page .cx-rg { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; font-size: 12px; line-height: 20px; color: var(--text-2); }
.cx-page .cx-rg b { font-weight: 300; font-size: 16px; color: var(--text); }

.cx-page .cx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.cx-page .cx-co {
  display: flex; flex-direction: column; gap: 4px; padding: 16px; min-width: 0; text-align: left; border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(160px 110px at 0 0, color-mix(in srgb, var(--cx-c) 22%, transparent), transparent 75%), var(--cx-panel-bg);
  transition: border-color .2s ease, background-color .2s ease;
}
.cx-page .cx-co:hover, .cx-page .cx-co.cx-hl { border-color: rgba(245, 209, 138, .55); }
/* Focus on a tile: the hover edge and an outline that follows the tile's corners, as on the Calendar's tiles. */
.cx-page .cx-tile:focus-visible, .cx-page .cx-co:focus-visible { border-color: rgba(245, 209, 138, .45); outline-offset: 2px; border-radius: var(--radius); }
.cx-page .cx-co.cx-on, .cx-page .cx-next-b.cx-on { border-color: var(--gold); }
.cx-page .cx-co-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.cx-page .cx-co-r { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; }
.cx-page .cx-co-n, .cx-page .cx-co-s { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-page .cx-co-n { font-weight: 600; font-size: 15px; line-height: 1.3; }
.cx-page .cx-co-s { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.cx-page .cx-co-ss { display: flex; gap: 4px; margin-top: auto; padding-top: 8px; }
.cx-page .cx-ss { font-style: normal; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--k); color: var(--text-2); background: color-mix(in srgb, var(--k) 14%, transparent); }
.cx-page .cx-co-x { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.cx-page .cx-co-x b { font-weight: 500; color: var(--text); white-space: nowrap; }
.cx-page .cx-empty-wide { grid-column: 1 / -1; padding: 32px 0; text-align: center; }

/* company mark: the ticker on the company colour */
.cx-page .cx-mono, .cx-dialog .cx-mono {
  flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--cx-c, #8A8FB0); color: #FFFFFF;
  font-family: var(--font-mono); font-weight: 600; font-size: 10.5px; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.cx-page .cx-mono.cx-ink-dark, .cx-dialog .cx-mono.cx-ink-dark { color: #04050D; }
.cx-page .cx-mono.cx-deep { box-shadow: inset 0 0 0 1px rgba(236, 238, 246, .45); }
.cx-page .cx-chip.cx-deep { box-shadow: inset 0 0 0 1px rgba(236, 238, 246, .5); }
.cx-page .cx-mono span, .cx-dialog .cx-mono span { max-width: 92%; overflow: hidden; white-space: nowrap; }
.cx-page .cx-mono-sm { width: 32px; height: 32px; border-radius: 8px; font-size: 9px; }
.cx-page .cx-mono-md { width: 42px; height: 42px; }
.cx-page .cx-mono-xl, .cx-dialog .cx-mono-xl { width: 76px; height: 76px; border-radius: 18px; font-size: 17px; }
.cx-page .cx-core .cx-mono { margin-bottom: 4px; }

/* ------------------------------------------------------------------ notes */
.cx-page .cx-notes { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.cx-page .cx-notes-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin-bottom: 12px; }
.cx-page .cx-note { font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 110ch; margin-top: 8px; }
.cx-page .cx-note a { text-decoration: underline; text-underline-offset: 3px; }
.cx-page .cx-note a:hover { color: var(--text); }

/* ------------------------------------------------------------------ profile dialog */
.cx-page .cx-dialog {
  width: min(1120px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 24px;
  color: var(--text); background: radial-gradient(700px 300px at 50% 0, color-mix(in srgb, var(--cx-c, #8A8FB0) 16%, transparent), transparent 70%), linear-gradient(180deg, #0E0F2C, #07081A);
  overflow: auto; overscroll-behavior: contain; box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
}
.cx-page .cx-dialog::backdrop { background: rgba(4, 5, 13, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cx-page .cx-dialog[open] { animation: cx-in .32s cubic-bezier(.2, .8, .2, 1); }
.cx-page .cx-p-sheet { position: relative; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.cx-page .cx-p-x {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 22px; line-height: 1;
  color: var(--text-2); display: grid; place-items: center; background: rgba(255, 255, 255, .04);
}
.cx-page .cx-p-x:hover { color: var(--gold); border-color: rgba(245, 209, 138, .5); }
.cx-page .cx-p-id { display: flex; align-items: center; gap: 24px; padding-right: 64px; }
.cx-page .cx-p-idt { min-width: 0; }
.cx-page .cx-p-name { font-size: 42px; line-height: 1.1; }
.cx-page .cx-p-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cx-page .cx-pill { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); }
.cx-page .cx-p-mid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.cx-page .cx-p-box { background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 18px; padding: 18px; min-width: 0; }
.cx-page .cx-p-sgrid { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: center; }
.cx-page .cx-p-ringbox { position: relative; width: 190px; height: 190px; }
.cx-page .cx-p-ring { width: 190px; height: 190px; }
.cx-page .cx-p-ring .cx-now { stroke: var(--gold); stroke-width: 2.5; }
.cx-page .cx-p-q { fill: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.cx-page .cx-p-ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cx-page .cx-p-ringc b { font-size: 15px; font-weight: 500; }
.cx-page .cx-p-sl-list { display: flex; flex-direction: column; }
.cx-page .cx-p-season { display: grid; grid-template-columns: 10px 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.cx-page .cx-p-season:first-child { border-top: 0; }
.cx-page .cx-p-season .cx-sw-dot { margin-top: 5px; }
.cx-page .cx-p-season.cx-now .cx-p-sl b { color: var(--gold); }
.cx-page .cx-p-sl { display: flex; flex-direction: column; font-family: var(--font-mono); font-size: 12px; }
.cx-page .cx-p-sl b { font-weight: 500; }
.cx-page .cx-p-sl small { font-size: 10.5px; color: var(--muted); }
.cx-page .cx-p-st { font-size: 13.5px; color: var(--text-2); line-height: 1.5; }
.cx-page .cx-p-links { display: flex; gap: 16px; flex-wrap: wrap; }
.cx-page .cx-p-links .cx-link { min-height: 44px; }
.cx-page .cx-tag { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); border: 1px solid rgba(239, 170, 187, .45); border-radius: 999px; padding: 1px 7px; margin-left: 8px; white-space: nowrap; }
.cx-page .cx-p-dl { display: flex; flex-direction: column; }
.cx-page .cx-p-dl li { display: grid; grid-template-columns: 148px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cx-page .cx-p-dl li:first-child { border-top: 0; }
.cx-page .cx-p-dd { font-family: var(--font-mono); font-size: 12px; color: var(--text); white-space: nowrap; }
.cx-page .cx-p-dt { font-size: 13.5px; color: var(--text-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.cx-page .cx-p-dt small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.cx-page .cx-p-dt .cx-tag { margin-left: 0; }
.cx-page .cx-p-dlinks { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: -4px; margin-bottom: -10px; }
.cx-page .cx-src { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cx-page .cx-src:hover { color: var(--gold); }
.cx-page .cx-p-cal { margin-top: 8px; }
.cx-page .cx-p-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.cx-page .cx-p-set { display: flex; flex-direction: column; gap: 8px; }
.cx-page .cx-p-set-h { font-family: var(--font-mono); font-size: 11px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; }
.cx-page .cx-p-set-h b { font-weight: 500; color: var(--text); font-size: 12px; }
.cx-page .cx-p-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cx-page .cx-p-thumb { display: flex; flex-direction: column; gap: 6px; border-radius: 10px; }
.cx-page .cx-p-thumb img, .cx-page .cx-p-noimg {
  width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  transition: border-color .2s ease, transform .2s ease;
}
.cx-page .cx-p-noimg { display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.cx-page .cx-p-thumb:hover img { border-color: rgba(245, 209, 138, .6); }
.cx-page .cx-p-type { font-size: 12px; color: var(--text-2); }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .cx-page .cx-star { animation: cx-tw 5s ease-in-out infinite; animation-delay: var(--cx-d, 0s); }
  .cx-page .cx-drift { animation: cx-spin 240s linear infinite; transform-origin: 0 0; }
  .cx-page .cx-tile:hover, .cx-page .cx-co:hover { transform: translateY(-2px); }
}
@keyframes cx-tw { 50% { opacity: .62; } }
@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cx-page *, .cx-page *::before, .cx-page .cx-dialog[open] { animation: none; transition: none; }
}

/* ------------------------------------------------------------------ widths */
@media (max-width: 1320px) {
  /* The filer switch keeps one row beside a long sector name, and the selection line stays on the page's axis under
     the Bento/Orbit switch: a compact switch ("All 110", as on the phone) and a smaller selection line. */
  .cx-page .cx-ctrl-l .cx-seg { flex-wrap: nowrap; }
  .cx-page .cx-seg-b { padding: 0 12px; }
  .cx-page .cx-seg-w { display: none; }
  .cx-page .cx-sel { font-size: 14px; }
  .cx-page .cx-sel b { font-size: 18px; }
  .cx-page .cx-hero { grid-template-columns: minmax(0, 272px) minmax(0, 1fr) minmax(0, 272px); }
  .cx-page .cx-sec-l { font-size: 16px; letter-spacing: .08em; }
  .cx-page .cx-disc-i { font-size: 15px; }
  .cx-page .cx-season { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .cx-page .cx-gauge, .cx-page .cx-gauge svg { width: 88px; height: 88px; }
  .cx-page .cx-gauge-c b { font-size: 24px; }
  .cx-page .cx-gauge-c span { font-size: 10px; }
  .cx-page .cx-next-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-page .cx-tiles, .cx-page .cx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-page .cx-h1 { font-size: 48px; }
}
@media (max-width: 1100px) {
  .cx-page .cx-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cx-page .cx-lede { grid-column: 1 / -1; grid-row: 2; text-align: left; justify-self: start; }
  .cx-page .cx-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cx-page .cx-stage { grid-column: 1 / -1; order: -1; }
  .cx-page .cx-p-mid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cx-page .cx-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cx-page .cx-lede { grid-row: auto; font-size: 14px; }
  .cx-page .cx-search { justify-self: stretch; max-width: none; }
  .cx-page .cx-h1 { font-size: 42px; }
  .cx-page .cx-swbar, .cx-page .cx-stage, .cx-page .cx-side-r, .cx-page .cx-handoff { display: none; }
  .cx-page .cx-ctrl { grid-template-columns: minmax(0, 1fr); justify-items: stretch; margin-top: 16px; }
  .cx-page .cx-ctrl-l .cx-seg { display: flex; flex-wrap: wrap; width: 100%; }
  .cx-page .cx-seg-b { flex: 1 1 auto; padding: 0 12px; letter-spacing: .08em; font-size: 12px; gap: 8px; }
  .cx-page .cx-seg-w, .cx-page .cx-wide { display: none; }
  .cx-page .cx-pill { font-size: 10.5px; }
  .cx-page .cx-p-links { gap: 4px 16px; }
  .cx-page .cx-ctrl-c { order: 3; }
  .cx-page .cx-ctrl-r { justify-self: stretch; }
  .cx-page .cx-sortbox, .cx-page .cx-select { width: 100%; }
  .cx-page .cx-sel { justify-content: flex-start; text-align: left; }
  .cx-page .cx-hero { grid-template-columns: minmax(0, 1fr); }
  .cx-page .cx-bento { margin-top: 32px; }
  .cx-page .cx-tiles { grid-template-columns: minmax(0, 1fr); }
  .cx-page .cx-next-l { grid-template-columns: minmax(0, 1fr); }
  .cx-page .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cx-page .cx-co { padding: 12px; }
  .cx-page .cx-co-n { font-size: 14px; }
  .cx-page .cx-co-n, .cx-page .cx-co-s { white-space: normal; overflow: visible; }
  .cx-page .cx-bhead { flex-wrap: wrap; gap: 8px 12px; }
  .cx-page .cx-bhead-l { gap: 12px; }
  .cx-page .cx-is-grid .cx-bhead-l { flex: 1 1 100%; }
  .cx-page .cx-bh { font-size: 14px; letter-spacing: .12em; }
  .cx-page .cx-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
  .cx-page .cx-p-sheet { padding: 16px; }
  .cx-page .cx-p-id { gap: 16px; padding-right: 48px; align-items: flex-start; }
  .cx-page .cx-p-x { top: 12px; right: 12px; }
  .cx-page .cx-p-name { font-size: 28px; }
  .cx-page .cx-mono-xl, .cx-dialog .cx-mono-xl { width: 56px; height: 56px; border-radius: 14px; font-size: 13px; }
  .cx-page .cx-p-sgrid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cx-page .cx-p-sl-list { width: 100%; }
  .cx-page .cx-p-season { grid-template-columns: 10px minmax(0, 1fr); gap: 8px 12px; }
  .cx-page .cx-p-sl { flex-direction: row; align-items: baseline; gap: 12px; }
  .cx-page .cx-p-st { grid-column: 2; }
  .cx-page .cx-p-chips { margin-right: -48px; }
  .cx-page .cx-pill { white-space: nowrap; }
  .cx-page .cx-p-dl li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cx-page .cx-p-sets { grid-template-columns: minmax(0, 1fr); }
  .cx-page .cx-notes { margin-top: 40px; }
}
@media (forced-colors: active) {
  .cx-page .cx-sw-b[aria-pressed="true"], .cx-page .cx-seg-b[aria-pressed="true"], .cx-page .cx-row[aria-pressed="true"] { outline: 2px solid CanvasText; }
}

/* Space held while the page loads its data, so the notes and the footer do not jump when the hub is drawn. The
   loading line is replaced by the hub (or by a message without this attribute), which ends the rule. */
@media (scripting: enabled) {
  .cx-page [data-cx-loading] { min-height: 1100px; }
}