/* Rankings section styles (/top/, /top/<sector>/, sector Top three). Every rule is scoped to .rkx* classes or the
   ranking list, so it does not depend on the sitewide type scale, footer or chart styles in styles.css. */
.rkx, .rkx-panel {
  --rk-pay: #f97316; --rk-bnk: #8b5cf6; --rk-lnd: #e11d48; --rk-kyc: #0891b2; --rk-wlt: #059669; --rk-gen: #475569;
  --rk-b80: #0f9d63; --rk-b75: #2563eb; --rk-b70: #d97706; --rk-blo: #dc4a2f;
  --rk-h85: #6fcf9e; --rk-h80: #a7e3c1; --rk-h75: #d5efbd; --rk-h70: #fbefae; --rk-h65: #fdd9b0; --rk-hlo: #f9c1b6; --rk-hink: #14202b;
  --rk-gold: #f4c542; --rk-gold-ink: #4a3500; --rk-silver: #d5dbe3; --rk-silver-ink: #26313d; --rk-bronze: #e3a36f; --rk-bronze-ink: #4a2408;
  --rk-card: var(--panel, #fff); --rk-line: var(--rule, #d9d3c3); --rk-track: var(--bar-track, #e4dfd0);
}
@media (prefers-color-scheme: dark) {
  .rkx, .rkx-panel {
    --rk-b80: #34d399; --rk-b75: #60a5fa; --rk-b70: #fbbf24; --rk-blo: #f87171;
    --rk-h85: #1f7a52; --rk-h80: #23674a; --rk-h75: #3d5a2a; --rk-h70: #5f5320; --rk-h65: #6a4321; --rk-hlo: #6e3229; --rk-hink: #f1f5f9;
  }
}
.rkx .s-pay, .rkx-panel.s-pay { --rk-acc: var(--rk-pay); }
.rkx .s-bnk, .rkx-panel.s-bnk { --rk-acc: var(--rk-bnk); }
.rkx .s-lnd, .rkx-panel.s-lnd { --rk-acc: var(--rk-lnd); }
.rkx .s-kyc, .rkx-panel.s-kyc { --rk-acc: var(--rk-kyc); }
.rkx .s-wlt, .rkx-panel.s-wlt { --rk-acc: var(--rk-wlt); }
.rkx .s-gen, .rkx-panel.s-gen { --rk-acc: var(--rk-gen); }

.rkx .page-head { padding-bottom: 18px; }
.rkx-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; font: 500 .8rem/1.4 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.rkx-meta b { color: var(--ink); }
.rkx-keys { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 18px; }
.rkx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 .75rem/1.3 var(--font); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rkx-legend .rkx-lg-t { font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.rkx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rkx-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.rkx-legend i.b80 { background: var(--rk-b80); } .rkx-legend i.b75 { background: var(--rk-b75); }
.rkx-legend i.b70 { background: var(--rk-b70); } .rkx-legend i.blo { background: var(--rk-blo); }
.rkx-legend i.h85 { background: var(--rk-h85); } .rkx-legend i.h80 { background: var(--rk-h80); } .rkx-legend i.h75 { background: var(--rk-h75); }
.rkx-legend i.h70 { background: var(--rk-h70); } .rkx-legend i.h65 { background: var(--rk-h65); } .rkx-legend i.hlo { background: var(--rk-hlo); }

/* rank badge */
.rkx-rb { display: inline-flex; align-items: center; justify-content: center; min-width: 2.3em; height: 2.3em; padding: 0 .45em; border-radius: 999px;
  font: 800 .9rem/1 var(--font); color: var(--ink); background: transparent; border: 1.5px solid var(--rk-line); box-sizing: border-box; font-variant-numeric: tabular-nums; }
.rkx-rb.r1 { background: var(--rk-gold); color: var(--rk-gold-ink); border-color: transparent; }
.rkx-rb.r2 { background: var(--rk-silver); color: var(--rk-silver-ink); border-color: transparent; }
.rkx-rb.r3 { background: var(--rk-bronze); color: var(--rk-bronze-ink); border-color: transparent; }

/* score bar */
.rkx-bar { display: inline-block; position: relative; width: 100%; max-width: 120px; height: 8px; border-radius: 999px; background: var(--rk-track); overflow: hidden; vertical-align: middle; }
.rkx-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--rk-b75); }
.rkx-bar.b80 i { background: var(--rk-b80); } .rkx-bar.b75 i { background: var(--rk-b75); }
.rkx-bar.b70 i { background: var(--rk-b70); } .rkx-bar.blo i { background: var(--rk-blo); }

/* hub panels + sector Top three */
.rkx-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 0 40px; }
.rkx-panel { background: var(--rk-card); border: 1px solid var(--rk-line); border-top: 5px solid var(--rk-acc); border-radius: 10px; padding: 16px 18px 12px; min-width: 0; }
.rkx-panel.rkx-flat { padding-top: 10px; }
.rkx-ph { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.rkx-code { font: 700 .75rem/1 var(--font); letter-spacing: .02em; color: #fff; background: var(--rk-acc); padding: 6px 8px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.rkx-ph h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; flex: 1; min-width: 0; }
.rkx-ph h2 a { color: var(--ink); text-decoration: none; }
.rkx-ph h2 a:hover { color: var(--rk-acc); text-decoration: underline; }
.rkx-n { font: 600 .75rem/1 var(--font); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rkx-mini { width: 100%; border-collapse: collapse; }
.rkx-mini th { font: 600 .75rem/1.2 var(--font); letter-spacing: .02em; text-transform: none; color: var(--muted); text-align: left; padding: 4px 8px 6px; border-bottom: 2px solid var(--rk-acc); font-variant-numeric: tabular-nums; }
.rkx-mini td { padding: 8px; border-bottom: 1px solid var(--rk-line); vertical-align: middle; }
.rkx-mini tbody tr:last-child td { border-bottom: 0; }
.rkx-mini .rkx-c-rk { width: 3.2rem; }
.rkx-mini .rkx-c-rk .rkx-rb { font-size: .78rem; }
.rkx-mini .rkx-c-co a { color: var(--ink); font-weight: 700; text-decoration: none; }
.rkx-mini .rkx-c-co a:hover { color: var(--accent); text-decoration: underline; }
.rkx-mini .rkx-c-co small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.4; margin-top: 2px; }
.rkx-mini .rkx-c-sc { width: 10.5rem; white-space: nowrap; }
.rkx-num { display: inline-block; min-width: 2.2ch; margin-right: 8px; font: 700 .95rem/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.rkx-mini .rkx-bar { width: 96px; }
.rkx-more { margin: 8px 0 2px; font-size: .86rem; color: var(--muted); }
.rkx-more a { font-weight: 700; }

/* full sector ranking */
.rkx-board { border: 1px solid var(--rk-line); border-top: 5px solid var(--rk-acc); border-radius: 10px; background: var(--rk-card); overflow: hidden; }
.rkx-board .rkx-thead, .rkx-board ol.rank-list > li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 11rem 21.5rem; column-gap: 18px; align-items: center; }
.rkx-board .rkx-thead { padding: 10px 18px; font: 600 .75rem/1.2 var(--font); letter-spacing: .02em; text-transform: none; color: var(--muted); border-bottom: 2px solid var(--rk-acc); font-variant-numeric: tabular-nums; }
.rkx-board ol.rank-list { list-style: none; margin: 0; padding: 0; }
.rkx-board ol.rank-list > li { padding: 14px 18px; border-bottom: 1px solid var(--rk-line); row-gap: 6px; }
.rkx-board ol.rank-list > li:last-child { border-bottom: 0; }
.rkx-board ol.rank-list > li:hover { background: color-mix(in srgb, var(--rk-acc) 6%, transparent); }
.rkx-board .rk { font: inherit; color: inherit; }
.rkx-co { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rkx-co h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; }
.rkx-co h3 a { color: var(--ink); text-decoration: none; }
.rkx-co h3 a:hover { color: var(--accent); text-decoration: underline; }
.rkx-co .lchips { display: inline-flex; margin: 0; }
.rkx-co .lchip { font-size: .62rem; padding: 3px 6px; }
.rkx-rate { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.rkx-rate .mono { font: 800 1.25rem/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.rkx-rate .rkx-of { font: 500 .75rem/1 var(--font); color: var(--muted); margin-left: -6px; font-variant-numeric: tabular-nums; }
.rkx-rate .rkx-bar { flex: 1; min-width: 50px; }
.rkx-heat { display: flex; gap: 3px; align-items: center; }
.rkx-h { flex: 1 1 0; min-width: 0; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px;
  font: 700 .75rem/1 var(--font); color: var(--rk-hink); cursor: help; font-variant-numeric: tabular-nums; }
.rkx-h.h85 { background: var(--rk-h85); } .rkx-h.h80 { background: var(--rk-h80); } .rkx-h.h75 { background: var(--rk-h75); }
.rkx-h.h70 { background: var(--rk-h70); } .rkx-h.h65 { background: var(--rk-h65); } .rkx-h.hlo { background: var(--rk-hlo); }
.rkx-gap { flex: 0 0 6px; }
.rkx-fit { grid-column: 2 / -1; margin: 0; font-size: .9rem; line-height: 1.4; color: var(--ink-2); }
.rkx-fit b { color: var(--muted); font-weight: 600; }
.rkx .table-note { margin-top: 12px; }

@media (max-width: 1100px) {
  .rkx-board .rkx-thead, .rkx-board ol.rank-list > li { grid-template-columns: 3.6rem minmax(0, 1fr) 9.5rem 17rem; column-gap: 14px; }
}
@media (max-width: 860px) {
  .rkx-hub { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rkx-board .rkx-thead { display: none; }
  .rkx-board { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .rkx-board ol.rank-list { display: grid; gap: 10px; }
  .rkx-board ol.rank-list > li { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; padding: 12px 14px;
    background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 10px; }
  .rkx-board ol.rank-list > li:last-child { border-bottom: 1px solid var(--rk-line); }
  .rkx-board .rk { grid-column: 1; grid-row: 1; align-self: start; }
  .rkx-co { grid-column: 2; grid-row: 1; }
  .rkx-rate { grid-column: 3; grid-row: 1; align-self: start; flex-wrap: wrap; justify-content: flex-end; width: 4.6rem; row-gap: 6px; }
  .rkx-rate .rkx-bar { flex: 0 0 100%; min-width: 0; height: 6px; }
  .rkx-heat { grid-column: 1 / -1; grid-row: 2; }
  .rkx-h { height: 1.7rem; font-size: .7rem; }
  .rkx-fit { grid-column: 1 / -1; grid-row: 3; font-size: .86rem; }
}
@media (max-width: 420px) {
  .rkx-panel { padding: 12px 12px 8px; }
  .rkx-mini td { padding: 7px 4px; }
  .rkx-mini .rkx-c-rk { width: 2.6rem; }
  .rkx-mini .rkx-c-sc { width: 8.4rem; }
  .rkx-mini .rkx-bar { width: 58px; }
  .rkx-keys { gap: 8px 16px; }
}

/* top-calm 2026-10-23 */
/* 2026-10-23: calmer Rankings (/top/, /top/<sector>/, sector Top three). Restrained FIN palette: ink, white, stone/mist,
   navy #2E4A66 + slate #8497AD; one accent (coral #D2593F) on the #1 rank number only. No per-sector or per-band hues. Inter only. */
.rkx, .rkx-panel {
  --tc-navy: #2E4A66; --tc-slate: #8497AD; --tc-mist: #EEF1F4; --tc-stone: #E7E3D8; --tc-coral: #D2593F;
  --rk-acc: var(--tc-navy); --rk-track: var(--tc-mist);
  --rk-b80: var(--tc-navy); --rk-b75: var(--tc-navy); --rk-b70: var(--tc-navy); --rk-blo: var(--tc-navy);
}
@media (prefers-color-scheme: dark) {
  .rkx, .rkx-panel { --tc-navy: #9DB4CC; --tc-slate: #7F90A6; --tc-mist: #1B2736; --tc-stone: #243246; --tc-coral: #E8826B;
    --rk-acc: var(--tc-navy); --rk-b80: var(--tc-navy); --rk-b75: var(--tc-navy); --rk-b70: var(--tc-navy); --rk-blo: var(--tc-navy); }
}
.rkx .s-pay, .rkx .s-bnk, .rkx .s-lnd, .rkx .s-kyc, .rkx .s-wlt, .rkx .s-gen,
.rkx-panel.s-pay, .rkx-panel.s-bnk, .rkx-panel.s-lnd, .rkx-panel.s-kyc, .rkx-panel.s-wlt, .rkx-panel.s-gen { --rk-acc: var(--tc-navy); }
/* page head: smaller, no lime square, no colour key for the (now single-tone) rating bar */
.rkx .page-head { padding-bottom: 10px; }
.rkx .page-head h1 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); letter-spacing: -.01em; }
.rkx .page-head .lede { font-size: .95rem; line-height: 1.5; max-width: 60ch; color: var(--ink-2); }
.rkx .page-head .label { color: var(--tc-navy); }
.rkx .page-head .label::before { background: var(--tc-slate); outline: 0; width: 6px; height: 6px; border-radius: 50%; }
.rkx-meta { margin-top: 10px; font-size: .75rem; }
.rkx-legend[aria-label="Color key"] { display: none; }
.rkx-keys { margin: 0 0 12px; }
.rkx-legend { font-size: .7rem; color: var(--muted); }
.rkx-legend i { width: 12px; height: 8px; border-radius: 2px; }
/* rank: plain tabular number, no medal discs; #1 alone in coral */
.rkx-rb, .rkx-rb.r1, .rkx-rb.r2, .rkx-rb.r3 { min-width: 1.6em; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  font: 600 .85rem/1 var(--font); color: var(--tc-slate); justify-content: flex-start; font-variant-numeric: tabular-nums; }
.rkx-rb.r1 { color: var(--tc-coral); font-weight: 700; }
.rkx-mini .rkx-c-rk .rkx-rb { font-size: .8rem; }
/* bars: one navy tone, thinner */
.rkx-bar { height: 4px; background: var(--tc-mist); }
.rkx-bar i, .rkx-bar.b80 i, .rkx-bar.b75 i, .rkx-bar.b70 i, .rkx-bar.blo i { background: var(--tc-navy); }
/* hub panels + sector Top three: hairline frame, navy top rule, neutral code tag */
.rkx-hub { gap: 16px; margin-bottom: 32px; }
.rkx-panel { border: 1px solid var(--rk-line); border-top: 2px solid var(--tc-navy); border-radius: 6px; padding: 12px 14px 8px; }
.rkx-ph { gap: 8px; margin-bottom: 6px; }
.rkx-code { color: var(--tc-navy); background: var(--tc-mist); font-size: .68rem; padding: 4px 6px; border-radius: 3px; }
.rkx-ph h2 { font-size: 1rem; }
.rkx-ph h2 a:hover { color: var(--tc-navy); }
.rkx-n { font-size: .7rem; }
.rkx-mini th { font-size: .68rem; padding: 2px 6px 5px; border-bottom: 1px solid var(--rk-line); }
.rkx-mini td { padding: 6px; font-size: .88rem; }
.rkx-mini .rkx-c-rk { width: 2.4rem; }
.rkx-mini .rkx-c-co a { font-weight: 600; }
.rkx-mini .rkx-c-co a:hover, .rkx-co h3 a:hover { color: var(--tc-navy); }
.rkx-mini .rkx-c-co small { font-size: .78rem; }
.rkx-num { font: 600 .85rem/1 var(--font); }
.rkx-mini .rkx-bar { width: 84px; }
.rkx-more { font-size: .78rem; margin: 6px 0 2px; }
.rkx-more a { font-weight: 600; color: var(--tc-navy); }
/* full sector ranking */
.rkx-board { border: 1px solid var(--rk-line); border-top: 2px solid var(--tc-navy); border-radius: 6px; }
.rkx-board .rkx-thead, .rkx-board ol.rank-list > li { grid-template-columns: 2.6rem minmax(0, 1fr) 9.5rem 19rem; column-gap: 14px; }
.rkx-board .rkx-thead { padding: 8px 16px; font-size: .68rem; border-bottom: 1px solid var(--rk-line); }
.rkx-board ol.rank-list > li { padding: 10px 16px; row-gap: 4px; }
.rkx-board ol.rank-list > li:hover { background: var(--tc-mist); }
.rkx-co { gap: 4px 8px; }
.rkx-co h3 { font: 600 .98rem/1.25 var(--font); }
.rkx-co .lchip, .rkx-co .lchip[class] { color: var(--muted); background: transparent; border: 1px solid var(--rk-line); font: 500 .62rem/1.2 var(--font); padding: 2px 5px; border-radius: 3px; letter-spacing: .01em; }
.rkx-rate .mono { font: 700 1rem/1 var(--font); }
.rkx-rate .rkx-of { font-size: .68rem; }
.rkx-heat { gap: 2px; }
.rkx-h, .rkx-h[class] { height: 1.55rem; border-radius: 2px; font: 500 .7rem/1 var(--font); background: var(--tc-mist); color: var(--ink-2); }
.rkx-h.h85 { background: var(--tc-navy); color: #fff; font-weight: 600; }
.rkx-h.h80 { background: color-mix(in srgb, var(--tc-navy) 22%, var(--panel, #fff)); color: var(--ink); }
.rkx-h.hlo { color: var(--tc-slate); }
.rkx-legend i.h85 { background: var(--tc-navy); } .rkx-legend i.h80 { background: color-mix(in srgb, var(--tc-navy) 22%, #fff); }
.rkx-legend i.h75, .rkx-legend i.h70, .rkx-legend i.h65, .rkx-legend i.hlo { background: var(--tc-mist); outline: 1px solid var(--rk-line); }
@media (prefers-color-scheme: dark) { .rkx-h.h85 { color: #0b111a; } }
.rkx-fit { font-size: .8rem; line-height: 1.4; color: var(--muted); }
.rkx .table-note { font-size: .75rem; color: var(--muted); }
@media (max-width: 1100px) {
  .rkx-board .rkx-thead, .rkx-board ol.rank-list > li { grid-template-columns: 2.4rem minmax(0, 1fr) 8.5rem 16rem; column-gap: 12px; }
}
@media (max-width: 860px) {
  .rkx-board { border: 0; border-radius: 0; }
  .rkx-board ol.rank-list { gap: 8px; }
  .rkx-board ol.rank-list > li { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; padding: 10px 12px;
    border: 1px solid var(--rk-line); border-left: 1px solid var(--rk-line); border-top: 2px solid var(--tc-navy); border-radius: 6px; }
  .rkx-rate { width: 4.2rem; }
  .rkx-h, .rkx-h[class] { height: 1.4rem; font-size: .66rem; }
  .rkx-fit { font-size: .78rem; }
}
@media (max-width: 420px) {
  .rkx-panel { padding: 10px 10px 6px; }
  .rkx-mini td { padding: 6px 4px; }
  .rkx-mini .rkx-c-rk { width: 1.9rem; }
  .rkx-mini .rkx-c-sc { width: 7.4rem; }
  .rkx-mini .rkx-bar { width: 52px; }
}
/* end top-calm */