/* ===== CROSS-SELL - who trades with one brand and not the other ===============
   Prefix .cs-*. Businesses, never records; ceilings, never forecasts.

   THE COLOURS ARE THE HOUSE'S AND NONE IS NEW.
     * --s1..--s3 encode the three parts of a split (an undecided pair, no
       candidate pair, a record that did not order) and each part is named and
       counted in the legend beside its swatch, never by colour alone.
     * gold is chrome: the active tab, a selected row, a ceiling bar. The lead
       band paints exactly ONE gold figure (.cs-bk.is-lead .cs-bk-v);
       scripts/lib/band-gold.js reads this file and enforces it.
     * amber (--warn-*) means overdue or provisional and always has a word.
   Every ink sits on a token that has a value in both themes, so nothing here is
   declared twice EXCEPT the band's ground, which is dark in both themes and
   lifts a step in dark mode (see the foot of the band section).               */

.cs-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cs-root { min-width: 0; }
/* The first tab stop on the page: out of sight until it has focus. */
.cs-skip { margin: 0 0 .6rem; }
.cs-skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cs-body:focus { outline: none; }

/* ============================== THE LEAD BAND ============================= */
/* The ground, the gold wash and the dark-theme lift are base.css's shared dark band; what stays is this page's spacing and its warn ink. */
.cs-band {
  margin: 0 0 .85rem; padding: 1.1rem 1.35rem 1.15rem;
  --cs-warn: #E4BC6C;
}
.cs-band-top { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.cs-band-ttl { min-width: 0; }
.cs-band-h {
  margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold);
  letter-spacing: -.02em; line-height: 1.15; color: #FFFFFF;
}
.cs-band-sub { margin: .25rem 0 0; max-width: 62ch; font-size: var(--fs-sm); color: rgba(255, 255, 255, .72); }
.cs-band-fresh {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .6rem; border-radius: 999px; cursor: help; white-space: nowrap;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--shell-line);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255, 255, 255, .72);
}
.cs-band-fresh .bi { font-size: var(--fs-xs); opacity: .85; }
.cs-band-fresh.is-warn { background: rgba(228, 188, 108, .13); border-color: rgba(228, 188, 108, .42); color: var(--cs-warn); }
.cs-band-fresh:focus-visible, .cs-bk:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; }

.cs-band-body {
  display: grid; align-items: start; gap: 1.2rem 2.2rem;
  grid-template-columns: minmax(15rem, 25rem) minmax(0, 1fr);
}
/* The figures. A <button> where the figure opens its businesses, an <a> where it
   opens Match Review; all read the same. */
.cs-bk {
  display: block; min-width: 0; margin: 0; padding: .25rem .5rem; border: 0; background: none;
  text-align: left; color: inherit; font: inherit; text-decoration: none; cursor: pointer; border-radius: 10px;
  transition: background .14s var(--ease);
}
.cs-bk:hover { background: rgba(255, 255, 255, .07); color: inherit; }
.cs-bk-v {
  display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.22;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: #FFFFFF; white-space: nowrap;
}
/* ONE figure is gold. A second would leave the band with no focal point. */
.cs-bk.is-lead .cs-bk-v { font-size: var(--fs-5xl); color: var(--gold-300); }
.cs-bk-l { display: block; margin-top: .18rem; font-size: var(--fs-xs); line-height: 1.35; color: rgba(255, 255, 255, .78); }
.cs-bk.is-lead .cs-bk-l { font-size: var(--fs-md); font-weight: var(--fw-medium); color: rgba(255, 255, 255, .88); }
.cs-bk-s { display: block; margin-top: .22rem; font-size: var(--fs-2xs); line-height: 1.45; color: rgba(255, 255, 255, .64); font-variant-numeric: tabular-nums; }
.cs-bk-s b { color: rgba(255, 255, 255, .9); font-weight: var(--fw-bold); }
.cs-bk.is-lead .cs-bk-s { font-size: var(--fs-xs); }
/* A word and its arrow travel together: "Match Review" must never leave the arrow alone on a line of its own. */
.cs-nw { white-space: nowrap; }
.cs-band-kpis {
  display: grid; gap: .8rem 1rem; padding-left: 1.6rem; border-left: 1px solid var(--shell-line);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.cs-band-note {
  margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--shell-line);
  font-size: var(--fs-xs); line-height: 1.55; color: rgba(255, 255, 255, .66);
}
.cs-off {
  display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 .85rem; padding: 1.1rem 1.2rem;
  border: 1px dashed var(--border); border-radius: var(--r); background: var(--surface); color: var(--text-soft);
}
.cs-off > i { font-size: 1.3rem; }
.cs-off b { display: block; color: var(--text); font-size: var(--fs-lg); }
.cs-off span { display: block; margin-top: .15rem; max-width: 70ch; font-size: var(--fs-sm); line-height: 1.5; }

/* THE WAITING STATE mirrors the band's shape so the page does not jump when the answer lands. */
.cs-sk {
  display: block; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 100%; animation: m1BandShimmer 1.2s ease-in-out infinite;
}
.cs-sk-t { width: 18rem; height: 1.5rem; }
.cs-sk-s { width: 26rem; max-width: 100%; height: .9rem; margin-top: .5rem; }
.cs-sk-big { width: 14rem; height: 6rem; }
.cs-sk-grid { width: 100%; height: 6rem; }

@media (max-width: 1100px) {
  .cs-band-body { grid-template-columns: minmax(0, 1fr); }
  .cs-band-kpis { padding-left: 0; border-left: 0; padding-top: .9rem; border-top: 1px solid var(--shell-line); }
}

/* ========================== WHERE THE FIGURES COME FROM =================== */
.cs-prov { margin: 0 0 .85rem; }
.cs-prov-row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; }
.cs-hn {
  display: inline-flex; align-items: center; gap: .38rem; padding: .22rem .7rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); cursor: help;
  font-size: var(--fs-xs); color: var(--text-soft); font-weight: var(--fw-medium);
}
.cs-hn .bi { font-size: var(--fs-sm); }
.cs-hn.is-warn { background: var(--warn-weak); border-color: var(--warn-line); color: var(--warn-ink); }
.cs-hn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cs-how {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .4rem;
  border: 0; background: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent-ink);
}
.cs-how:hover { background: var(--accent-weak); }
.cs-how:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-how-c { font-size: var(--fs-xs); }
.cs-how[aria-expanded="true"] .cs-how-c { transform: rotate(180deg); }
.cs-feed { margin: .5rem 0 0; max-width: 110ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); }
.cs-feed.is-warn { color: var(--warn-ink); }
.cs-how-body {
  margin-top: .6rem; padding: 1rem 1.2rem 1.1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow);
}
.cs-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem 1.6rem; margin: 0 0 .9rem; }
.cs-df dt { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text); }
.cs-df dd { margin: .1rem 0 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-soft); }
.cs-notes { margin: 0; padding-left: 1.1rem; font-size: var(--fs-xs); line-height: 1.55; color: var(--text-soft); }
.cs-notes li + li { margin-top: .25rem; }

/* ================================== THE TABS ============================== */
.cs-tabs { display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 0 .85rem; border-bottom: 1px solid var(--border); }
.cs-tab {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 -1px; padding: .65rem .95rem;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-soft);
}
.cs-tab:hover { color: var(--text); }
.cs-tab.is-on { color: var(--text); font-weight: var(--fw-bold); border-bottom-color: var(--accent-fill); }
.cs-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

/* ================================== THE CARDS ============================= */
.cs-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); align-items: start; margin-bottom: .85rem; }
.cs-card {
  min-width: 0; padding: 1rem 1.15rem 1.05rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow);
}
.cs-grid-2 { grid-template-columns: minmax(22rem, 5fr) minmax(0, 7fr); }
.cs-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1250px) { .cs-grid-3 { grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); } }
@media (max-width: 1500px) { .cs-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.cs-wide, .cs-decide, .cs-states { grid-column: 1 / -1; }
.cs-card-h { display: flex; align-items: center; gap: .45rem; margin: 0 0 .7rem; }
.cs-card-t { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text); }
.cs-basis { margin: .85rem 0 0; padding-top: .6rem; border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); }
.cs-lede { margin: 0 0 .7rem; max-width: 90ch; font-size: var(--fs-md); line-height: 1.5; color: var(--text-soft); }
.cs-lede b { color: var(--text); }
.cs-fact { margin: .7rem 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-soft); }
.cs-fact b { color: var(--text); }
/* The old volume-based ceiling, kept for comparison: dashed on its left so it reads as a different kind of figure from the fee ceilings above it. */
.cs-vol { padding-left: .7rem; border-left: 2px dashed var(--border); cursor: help; }
.cs-facts { margin: .5rem 0 0; padding: 0; list-style: none; font-size: var(--fs-md); color: var(--text-soft); }
.cs-facts li + li { margin-top: .25rem; }
.cs-facts b { color: var(--text); font-variant-numeric: tabular-nums; }
.cs-hint-line { margin: .7rem 0 0; font-size: var(--fs-sm); color: var(--text-soft); }
.cs-thr { margin: 0 0 .7rem; font-size: var(--fs-sm); color: var(--text-soft); }
.cs-thr .bi, .cs-warn .bi { margin-right: .3rem; }
.cs-warn {
  display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 .8rem; padding: .6rem .8rem;
  border: 1px solid var(--warn-line); border-radius: 10px; background: var(--warn-soft);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--warn-ink);
}
.cs-warn > .bi { margin: .15rem 0 0; }

/* The decide-first card: the page's call to action. */
.cs-decide { border-color: var(--accent-line); background: var(--accent-weak); }
.cs-decide-body { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; }
.cs-dec-fig { display: flex; flex-direction: column; min-width: 8rem; }
.cs-dec-fig b { font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.cs-dec-fig span { font-size: var(--fs-sm); color: var(--text-soft); }
.cs-dec-txt { flex: 1 1 24rem; min-width: 0; }
.cs-dec-txt p { margin: 0; max-width: 76ch; font-size: var(--fs-md); line-height: 1.5; color: var(--text); }
.cs-acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.cs-btn {
  display: inline-flex; align-items: center; gap: .4rem; height: 34px; margin: 0; padding: 0 .85rem;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cs-btn:hover { background: var(--surface-2); border-color: var(--accent-line); color: var(--text); }
.cs-btn.is-primary { background: var(--accent-fill); border-color: transparent; color: var(--accent-on); }
.cs-btn.is-primary:hover { filter: brightness(1.06); color: var(--accent-on); }
.cs-btn:disabled { opacity: .5; cursor: default; }
.cs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A big figure that opens its businesses. */
.cs-big { margin: 0 0 .7rem; }
.cs-bigb {
  display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0; padding: .1rem .3rem; margin-left: -.3rem;
  border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text);
}
.cs-bigb b { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.cs-bigb span { font-size: var(--fs-sm); color: var(--text-soft); }
.cs-bigb:hover { background: var(--accent-weak); }
.cs-bigb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A split, as a picture: widths are proportional to the counts, and the legend carries the numbers. */
.cs-stack { display: flex; gap: 2px; height: 12px; margin: .1rem 0 .75rem; overflow: hidden; border-radius: 6px; }
.cs-seg { display: block; min-width: 4px; transform-origin: left; animation: csGrow .6s var(--ease-out) backwards; }
.cs-s1 { background: var(--s1); }
.cs-s2 { background: var(--s2); }
.cs-s3 { background: var(--s3); }
.cs-leg { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .1rem; }
.cs-lg {
  display: grid; grid-template-columns: .8rem minmax(0, 1fr); column-gap: .55rem; align-items: baseline; width: 100%;
  margin: 0; padding: .35rem .4rem; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; font: inherit; color: var(--text);
}
.cs-lg:hover { background: var(--surface-3); }
.cs-lg:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.cs-sw { display: block; width: .8rem; height: .8rem; border-radius: 3px; align-self: center; }
.cs-lg-n { font-size: var(--fs-sm); line-height: 1.35; }
.cs-lg-n b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cs-lg-s { grid-column: 2; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-soft); font-variant-numeric: tabular-nums; }

.cs-tiers { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .8rem 0 0; }
.cs-tiers-t { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft); margin-right: .15rem; }
.cs-chipb {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .22rem .7rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; font-size: var(--fs-xs); color: var(--text-soft);
  transition: background .14s var(--ease), border-color .14s var(--ease);
}
.cs-chipb b { color: var(--text); font-weight: var(--fw-bold); }
.cs-chipb span { font-variant-numeric: tabular-nums; }
.cs-chipb:hover { background: var(--accent-weak); border-color: var(--accent-line); }
.cs-chipb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* THE CEILINGS: one measure, one hue. */
.cs-cb { margin: 0 0 1rem; }
.cs-cb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.cs-cb-l { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text); }
.cs-cb-v { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text); }
.cs-cb-t { height: 12px; border-radius: 6px; background: var(--inset); border: 1px solid var(--border); overflow: hidden; }
.cs-cb-f { display: block; height: 100%; min-width: 3px; border-radius: 6px; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transform-origin: left; animation: csGrow .7s var(--ease-out) backwards; }
.cs-cb-m { margin: .35rem 0 0; max-width: 84ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-soft); }

@keyframes csGrow { from { transform: scaleX(0); } }

/* ================================== TABLES ================================ */
.cs-tw { overflow-x: auto; }
.cs-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.cs-tbl th, .cs-tbl td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.cs-tbl thead th {
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-soft); vertical-align: bottom;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cs-tbl tbody th { font-weight: var(--fw-medium); color: var(--text); }
.cs-tbl .num { text-align: right; white-space: nowrap; }
.cs-tbl thead .num { white-space: normal; }
.cs-states .cs-tbl th, .cs-states .cs-tbl td { padding: .55rem .5rem; }
.cs-srow > th { white-space: nowrap; }
.cs-tbl thead th[data-bs-toggle] { cursor: help; }
.cs-tbl-sm { font-size: var(--fs-sm); }
.cs-dim { color: var(--text-dim); font-weight: var(--fw-normal); }
.cs-tag {
  display: inline-block; margin-left: .35rem; padding: .04rem .45rem; border-radius: 999px; cursor: help; white-space: nowrap;
  font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 1.5;
  background: var(--warn-weak); color: var(--warn-ink); border: 1px solid var(--warn-line);
}
.cs-sortb {
  display: inline-flex; align-items: center; gap: .25rem; margin: 0; padding: .1rem .25rem; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-soft); cursor: pointer; text-align: inherit; white-space: normal;
}
.cs-sortb:hover { color: var(--text); background: var(--accent-weak); }
.cs-sortb.is-on { color: var(--accent-ink); }
.cs-sortb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-srow:hover, .cs-grow:hover, .cs-frow:hover { background: var(--surface-2); }
.cs-grow.is-on { background: var(--accent-weak); box-shadow: inset 3px 0 0 var(--accent); }
.cs-linkb, .cs-gb {
  margin: 0; padding: .1rem .3rem; border: 0; border-radius: 6px; background: none; cursor: pointer; text-align: left;
  font: inherit; font-size: inherit; color: var(--accent-ink);
}
.cs-gb { font-weight: var(--fw-bold); color: var(--text); }
.cs-linkb:hover, .cs-gb:hover { background: var(--accent-weak); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cs-linkb:focus-visible, .cs-gb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-ilink { margin-left: .3rem; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.cs-ilink:hover { text-decoration-color: currentColor; }
/* A share, as a meter beside its figure: one hue, and the number is always printed. */
.cs-pm { display: inline-flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.cs-pm-t { display: block; width: 4.5rem; height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.cs-pm-f { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--accent-fill); transform-origin: left; animation: csGrow .6s var(--ease-out) backwards; }

.cs-ftool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.2rem; margin: 0 0 .7rem; }
.cs-chk { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); color: var(--text); cursor: pointer; }
.cs-chk input { accent-color: var(--accent-fill); }
.cs-count { font-size: var(--fs-xs); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cs-cem { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem 2.4rem; }

/* ============================== THE BUSINESS LIST ========================= */
.cs-list { padding: 0; margin: 0 0 .85rem; scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.cs-list-head { padding: 1rem 1.2rem .3rem; }
.cs-list-t { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); }
.cs-list-t:focus { outline: none; }
.cs-list-rule { margin: .25rem 0 0; max-width: 90ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-soft); }
.cs-lbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; padding: .6rem 1.2rem .5rem; }
.cs-lsel { display: contents; }
.cs-f { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.cs-fl { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-soft); }
.cs-select {
  height: 34px; max-width: 24rem; padding: 0 .6rem; border-radius: 9px; border: 1px solid var(--border);
  background-color: var(--surface); color: var(--text); font-size: var(--fs-sm);
}
.cs-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cs-list .lk-search { align-self: flex-end; }
.cs-ltbl thead th { position: sticky; top: var(--hdr-h); z-index: 2; }
.cs-row:hover { background: var(--surface-2); }
.cs-row.lk-cur { background: var(--inset); }
.cs-row.lk-cur > th { box-shadow: inset 3px 0 0 var(--accent); }
.cs-row > th { min-width: 15rem; }
.cs-nm { display: inline-block; font-weight: var(--fw-bold); color: var(--text); text-decoration: none; }
a.cs-nm:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
a.cs-nm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.cs-sub { display: block; margin-top: .1rem; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--text-soft); }
.cs-ltbl td.is-val, .cs-ltbl th.is-val { font-weight: var(--fw-bold); color: var(--text); }
.cs-brands { display: inline-flex; gap: .25rem; }
/* The initials under the brand's avatar are base.css's (.bbadge.len2 / .len3 already sit at the 11px floor); nothing restated here. */
.cs-pair { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; min-width: 18rem; max-width: 44rem; }
.cs-pair-h { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.cs-pl { font-weight: var(--fw-medium); color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.cs-pl:hover { text-decoration-color: currentColor; }
.cs-pl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.cs-pair-o { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-soft); }
.cs-pair-o b { color: var(--text); }
.cs-sync {
  display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px;
  background: var(--warn-weak); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: var(--fs-xs);
}
#csList.is-busy { opacity: .55; transition: opacity .15s var(--ease); cursor: progress; }
.cs-empty { display: flex; gap: .8rem; align-items: flex-start; margin: .6rem 1.2rem 1.2rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--border); border-radius: var(--r); color: var(--text-soft); }
.cs-empty > i { font-size: 1.3rem; opacity: .7; }
.cs-empty b { display: block; color: var(--text); font-size: var(--fs-lg); }
.cs-empty span { display: block; margin-top: .15rem; max-width: 70ch; font-size: var(--fs-md); line-height: 1.5; }
.cs-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .8rem 1.2rem 1rem; }
.cs-pager:empty { display: none; }
.cs-pg-r { margin-right: auto; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cs-pg-n { font-size: var(--fs-sm); color: var(--text-soft); }

/* ============================ THE RULE DIALOG ============================= */
.cs-wide-m { max-width: min(62rem, 94vw); }
.cs-rh { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .6rem; border-bottom: 1px solid var(--border-soft); }
.cs-rt { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text); }
.cs-rs { margin: .35rem 0 0; max-width: 78ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-soft); }
.cs-rb { padding: .8rem 1.3rem 1.1rem; }
.cs-rcount { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--text-soft); }
.cs-pager-m { padding: .8rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .cs-seg, .cs-cb-f, .cs-pm-f, .cs-sk { animation: none; }
  .cs-bk, .cs-chipb, #csList.is-busy { transition: none; }
}