/* badmintonapi.com: the rankings page. Event tabs, the list's facts, and the table with each entry's move and recent rank. */
.rk { background: #F4F1E8; }
.rk-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.rk code { font: 500 .9em "IBM Plex Mono", ui-monospace, monospace; }
.rk a { transition: color .15s ease; }
.rk-over { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lt); font-weight: 700; }
.rk-over::before { content: ""; width: 34px; height: 1px; background: currentColor; }

/* ------------------------------------------------------------------ the top band */
.rk-top { color: #fff; border-bottom: 1px solid var(--gold); background: radial-gradient(50% 90% at 88% 0%, rgba(34,150,112,.42) 0%, rgba(34,150,112,0) 70%), radial-gradient(40% 70% at 0% 100%, rgba(226,199,127,.12) 0%, rgba(226,199,127,0) 70%), linear-gradient(170deg, #0B4A3E 0%, #072E27 100%); }
.rk-top .rk-in { padding-top: 40px; padding-bottom: 116px; }
.rk-top h1 { margin: 14px 0 0; font: 700 44px/1.1 "Shippori Mincho", serif; letter-spacing: -.01em; }
.rk-top p { margin: 12px 0 0; max-width: 600px; font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,.74); }

/* ------------------------------------------------------------------ the card, lifted over the band */
.rk-body { padding-bottom: 96px; }
.rk-card { margin-top: -80px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 0 rgba(10,63,53,.04), 0 30px 50px -36px rgba(10,63,53,.35); }
.rk-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.rk-tabs a { flex: none; margin-bottom: -1px; padding: 18px 14px 16px; border-bottom: 2px solid transparent; font-size: 14.5px; font-weight: 700; color: #7B847F; }
.rk-tabs a:hover { color: var(--ink); }
.rk-tabs a[aria-current="page"] { color: var(--deep); border-bottom-color: var(--gold); }
.rk-tabs a:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; border-radius: 10px; }
.rk-date { display: flex; align-items: center; gap: 10px; flex: none; font-size: 13px; color: var(--muted); }
.rk-date select { height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%236B736E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E") right 12px center no-repeat; font: 600 13.5px "Zen Kaku Gothic New", sans-serif; color: var(--ink); appearance: none; cursor: pointer; }
.rk-date select:focus-visible { outline: 2px solid var(--deep); outline-offset: 1px; }
.rk-date noscript a { margin-left: 8px; color: var(--deep); font-weight: 700; }

.rk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #FDFCF8; }
.rf { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 16px 24px 18px; }
.rf + .rf { border-left: 1px solid var(--hair); }
.rf-k { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.rf b { margin-top: 4px; font: 700 17px/1.3 "Shippori Mincho", serif; color: var(--deep); }
.rf span:last-child { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ the table */
.rk-t { padding: 0 24px 8px; }
.rk-h, .rk-r { display: grid; grid-template-columns: 56px 64px minmax(0, 1fr) 110px 90px 110px; gap: 16px; align-items: center; }
.rk-h { position: sticky; top: 104px; z-index: 2; padding: 12px 0 10px; background: #fff; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8C938F; }
.rk-h span:nth-child(n+4) { text-align: right; }
.rk-r { padding: 11px 0; }
.rk-r + .rk-r { border-top: 1px solid var(--hair); }
.rk-r[hidden] { display: none; }
.rk-n { font: 700 18px/1 "Shippori Mincho", serif; color: var(--deep); font-variant-numeric: tabular-nums; }
.rk-top3 .rk-n { color: var(--gold); }
.rk-m em { font-style: normal; font: 600 12px "IBM Plex Mono", monospace; }
.mv-up { color: #1E6B4E; }
.mv-dn { color: #A6562F; }
.mv-eq { color: #B5BAB7; }
.mv-new { padding: 2px 7px; border-radius: 4px; background: #FBF4E2; color: #8A6D24 !important; font: 700 10.5px "Zen Kaku Gothic New", sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
.rk-p { min-width: 0; font-size: 14.5px; line-height: 1.4; }
.rk-p a, .rk-p b { font-weight: 700; color: var(--ink); }
.rk-p a:hover { color: var(--jade); }
.rk-p small { margin-left: 6px; font-size: 10px; letter-spacing: .12em; color: var(--muted); font-weight: 500; }
.rk-and { margin: 0 8px; font-style: normal; color: #C4BFB0; }
.rk-pts { font: 500 13.5px "IBM Plex Mono", monospace; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.rk-g { font: 500 12.5px "IBM Plex Mono", monospace; color: var(--muted); text-align: right; }
.rk-g.up { color: #1E6B4E; }
.rk-g.dn { color: #A6562F; }
.rk-l { display: flex; justify-content: flex-end; }
.rk-sp { display: block; width: 92px; height: 24px; overflow: visible; }
.rk-sp path { fill: none; stroke: var(--jade); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rk-sp circle { fill: var(--jade); stroke: #fff; stroke-width: 1.5; }
.rk-nol { font-size: 11.5px; color: #A7ADA9; }
.rk-all { display: block; width: calc(100% + 48px); margin: 8px -24px -8px; padding: 15px; border: 0; border-top: 1px solid var(--hair); border-radius: 0 0 10px 10px; background: #FBFAF6; color: var(--deep); font: 700 13.5px "Zen Kaku Gothic New", sans-serif; cursor: pointer; transition: background-color .15s ease; }
.rk-all:hover { background: var(--paper); }
.rk-all:focus-visible { outline: 2px solid var(--deep); outline-offset: -2px; }
.rk-none { margin: 0; padding: 28px 24px; font-size: 14.5px; color: var(--muted); }
.rk-note { margin: 14px 4px 0; font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------------------ the way into the API */
.rk-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 56px; padding: 30px 34px; border-radius: 10px; color: #fff; background: radial-gradient(60% 120% at 100% 0%, #115446 0%, #0A3F35 50%, #072E27 100%); border: 1px solid rgba(226,199,127,.3); }
.rk-cta h2 { margin: 0; font: 700 24px/1.3 "Shippori Mincho", serif; color: #fff; }
.rk-cta p { margin: 8px 0 0; max-width: 640px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.rk-cta code { padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.07); color: var(--gold-lt); }
.rk-cta-go { display: flex; align-items: center; gap: 12px; flex: none; }
.rk-key { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 18px 0 6px; border-radius: 10px; background: var(--gold); color: var(--deeper); font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .01em; transition: background-color .15s ease; }
.rk-key:hover { background: #D4B25F; }
.rk-key:focus-visible, .rk-doc:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.rk-g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #fff; }
.rk-g svg { width: 17px; height: 17px; }
.rk-doc { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 14px; font-weight: 700; transition: border-color .15s ease; }
.rk-doc:hover { border-color: var(--gold-lt); }

/* ------------------------------------------------------------------ smaller screens */
/* ------------------------------------------------------------------ the number ones since 2009 */
.rk-ones { margin-top: 48px; }
.rk-ones-hd { margin-bottom: 18px; }
.rk-k { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.rk-k::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.rk-ones-hd h2 { margin: 12px 0 0; font: 700 28px/1.2 "Shippori Mincho", serif; color: var(--deep); }
.rk-ones-hd p { margin: 8px 0 0; max-width: 680px; font-size: 15px; line-height: 1.65; color: #4A544F; }
.rk-ones-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rk-oc { min-width: 0; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.rk-oc h3 { margin: 0 0 10px; font: 700 18px "Shippori Mincho", serif; color: var(--deep); }
.rk-wk, .rk-rg { margin: 0; padding: 0; list-style: none; }
.rk-wk li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 110px 44px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.rk-wk li:first-child, .rk-rg li:first-child { border-top: 0; }
.rk-wk-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-wk-p, .rk-rg-p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-wk-p a, .rk-rg-p a { color: var(--deep); font-weight: 700; }
.rk-wk-p small { margin-left: 6px; font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.rk-wk-p em { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--gold); color: var(--deeper); font-style: normal; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.rk-wk-b { height: 8px; border-radius: 6px; background: #F4F1E8; overflow: hidden; }
.rk-wk-b i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(14,94,78,.35), var(--jade)); }
.rk-wk b, .rk-rg b { text-align: right; color: var(--deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-rg li { display: grid; grid-template-columns: 196px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.rk-rg li[hidden] { display: none; }
.rk-rg li.now .rk-rg-d { color: var(--deep); font-weight: 700; }
.rk-rg-d { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-rg b { font-size: 13px; }
.rk-oc-ft { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.rk-rg-all { width: 100%; height: 40px; margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; background: #FDFCF8; font: 700 13.5px "Zen Kaku Gothic New", sans-serif; color: var(--deep); cursor: pointer; }
.rk-rg-all:hover { border-color: var(--gold); }
@media (max-width: 1060px) {
.rk-bar { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.rk-tabs { padding: 0 16px; border-bottom: 1px solid var(--hair); }
.rk-date { padding: 12px 24px; }
.rk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rf:nth-child(3) { border-left: 0; }
.rf:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 960px) {
.rk-h, .rk-r { grid-template-columns: 44px 56px minmax(0, 1fr) 96px 110px; }
.rk-h span:nth-child(5), .rk-g { display: none; }
.rk-cta { flex-direction: column; align-items: flex-start; }
.rk-ones-g { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.rk-in { padding: 0 16px; }
.rk-top .rk-in { padding-top: 28px; padding-bottom: 100px; }
.rk-top h1 { font-size: 32px; }
.rk-card { margin-top: -72px; }
.rk-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 14px 16px; }
.rk-tabs a { margin: 0; padding: 10px 6px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-size: 13px; white-space: nowrap; }
.rk-tabs a[aria-current="page"] { border-color: var(--gold); background: #FBF7EA; }
.rk-tabs a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.rk-date { padding: 12px 16px; }
.rk-date select { flex: 1; }
.rf { padding: 14px 16px; }
.rf b { font-size: 15px; }
.rk-t { padding: 0 16px 8px; }
.rk-h { display: none; }
.rk-r { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "n p pts" "n m pts"; gap: 2px 12px; }
.rk-n { grid-area: n; }
.rk-p { grid-area: p; font-size: 14px; }
.rk-m { grid-area: m; }
.rk-pts { grid-area: pts; }
.rk-l { display: none; }
.rk-and { display: none; }
.rk-mb { display: block; }
.rk-all { width: calc(100% + 32px); margin: 8px -16px -8px; }
.rk-cta { padding: 24px 20px; }
.rk-cta h2 { font-size: 21px; }
.rk-cta-go { flex-wrap: wrap; }
.rk-ones-hd h2 { font-size: 23px; }
.rk-oc { padding: 16px; }
.rk-wk li { grid-template-columns: 22px minmax(0, 1fr) 40px 40px; gap: 8px; }
.rk-wk-p small { display: none; }
.rk-rg li { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "d w" "p w"; gap: 2px 10px; }
.rk-rg-d { grid-area: d; }
.rk-rg-p { grid-area: p; }
.rk-rg b { grid-area: w; }
}