/* badmintonapi.com: a player page. Career numbers, ranking and rating over time, form, seasons, titles, matches, partners and rivals. */
.py { background: #F4F1E8; }
.py-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.py code { font: 500 .9em "IBM Plex Mono", ui-monospace, monospace; }
.py a { transition: color .15s ease; }
.py-unk { font-size: 12.5px; color: #A7ADA9; }
.py-over2 { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.py-over2::before { content: ""; width: 34px; height: 1px; background: var(--gold); }

/* ------------------------------------------------------------------ the top band */
.py-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%); }
.py-top .py-in { padding-top: 26px; padding-bottom: 108px; }
.py-crumb { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.55); }
.py-crumb a { color: rgba(255,255,255,.8); border-bottom: 1px solid rgba(255,255,255,.25); }
.py-crumb a:hover { color: #fff; border-color: var(--gold-lt); }
.py-top-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-top: 26px; }
.py-cc { display: inline-block; font: 700 11px "IBM Plex Mono", monospace; letter-spacing: .12em; color: var(--gold-lt); border: 1px solid rgba(226,199,127,.5); border-radius: 4px; padding: 4px 8px; }
.py-top h1 { margin: 12px 0 0; font: 700 46px/1.08 "Shippori Mincho", serif; letter-spacing: -.01em; }
.py-top-row p { margin: 12px 0 0; font-size: 15.5px; color: rgba(255,255,255,.74); }
.py-facts { display: flex; margin: 0 0 4px; flex: none; }
.py-facts div { padding: 0 22px; border-left: 1px solid rgba(226,199,127,.25); }
.py-facts div:first-child { padding-left: 0; border-left: 0; }
.py-facts dt { font: 700 26px/1.1 "Shippori Mincho", serif; color: #fff; font-variant-numeric: tabular-nums; }
.py-facts dd { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.58); white-space: nowrap; }

/* ------------------------------------------------------------------ ranking, rating and form, lifted over the band */
.py-lead-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: -72px; }
.pk { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px 18px; 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); }
.pk-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-over { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.pk-more { font-size: 12.5px; font-weight: 700; color: var(--deep); border-bottom: 1px solid rgba(10,63,53,.3); }
.pk-big { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; }
.pk-big b { font: 700 46px/.95 "Shippori Mincho", serif; color: var(--deep); font-variant-numeric: tabular-nums; }
.pk-big b small { font-size: 22px; color: #A7ADA9; }
.pk-big span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pk-ft { margin: auto 0 0; padding-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pk-none { margin: 14px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* a line over time, with its hover */
.ch { position: relative; height: 84px; margin-top: 14px; border-bottom: 1px solid var(--hair); cursor: crosshair; }
.ch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ch-l { fill: none; stroke: var(--jade); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ch-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.ch-hov { background: var(--gold); }
.ch::after { content: ""; position: absolute; left: var(--gx, -10px); top: 0; bottom: 0; width: 1px; background: #E6DFCC; opacity: var(--go, 0); pointer-events: none; }

/* form */
.fm { display: flex; gap: 5px; list-style: none; margin: 16px 0 0; padding: 0; }
.fm li { display: grid; place-items: center; flex: 1; max-width: 30px; height: 30px; border-radius: 6px; font: 700 12px "Zen Kaku Gothic New", sans-serif; cursor: default; }
.fm li:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.fm-w { background: var(--jade); color: #fff; }
.fm-l { background: #fff; color: #7B847F; box-shadow: inset 0 0 0 1px #D9D1BB; }

/* the hover label, shared by every chart and chip */
.tip { position: fixed; z-index: 30; max-width: 280px; padding: 8px 11px; border-radius: 10px; background: var(--deeper); color: #fff; font-size: 12.5px; line-height: 1.45; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); pointer-events: none; }

/* ------------------------------------------------------------------ section heads */
.py-sec { padding-top: 68px; }
.py-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 22px; }
.py-hd h2 { margin: 14px 0 0; font: 700 30px/1.15 "Shippori Mincho", serif; color: var(--deep); }
.py-hd > p { margin: 0 0 4px; max-width: 460px; font-size: 14px; line-height: 1.6; color: var(--muted); text-align: right; }

/* ------------------------------------------------------------------ season by season */
.lg { display: flex; gap: 18px; list-style: none; margin: 0 0 6px; padding: 0; font-size: 13px; color: #4A544F; }
.lg li { display: flex; align-items: center; gap: 8px; }
.lg i { width: 12px; height: 12px; border-radius: 3px; }
.lg-p { background: #E9E2CF; }
.lg-w { background: var(--jade); }
.lg-t { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--gold); }
.ss { padding: 26px 26px 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 0 rgba(10,63,53,.04), 0 24px 48px -32px rgba(10,63,53,.25); }
.ss-plot { display: flex; align-items: stretch; gap: 2px; height: 220px; border-bottom: 1px solid #E6DFCC; }
.ss-c { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; cursor: default; outline: none; }
.ss-c:hover, .ss-c:focus-visible { background: #FAF7EF; }
.ss-c:focus-visible { box-shadow: inset 0 0 0 2px var(--deep); }
.ss-bar { position: relative; align-self: flex-end; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: #E9E2CF; }
.ss-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--jade); box-shadow: 0 -2px 0 #fff; }
.ss-bar em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 10px; background: var(--gold); color: #fff; font: 700 10px "Zen Kaku Gothic New", sans-serif; font-style: normal; }
.ss-y { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font: 500 10.5px "IBM Plex Mono", monospace; color: #8C938F; white-space: nowrap; }
.ss-tab { margin-top: 34px; font-size: 13.5px; }
.ss-tab summary { cursor: pointer; font-weight: 700; color: var(--deep); }
.ss-tab table { width: 100%; max-width: 480px; margin-top: 10px; border-collapse: collapse; }
.ss-tab th, .ss-tab td { padding: 6px 10px; border-bottom: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; }
.ss-tab th:first-child { text-align: left; }
.ss-tab thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8C938F; }

/* ------------------------------------------------------------------ titles */
.tl { list-style: none; margin: 0; padding: 6px 24px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.tl li { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) 150px; gap: 16px; align-items: baseline; padding: 11px 0; font-size: 13.5px; }
.tl li + li.tl-new { border-top: 1px solid var(--hair); }
.tl li[hidden] { display: none; }
.tl-all { display: block; width: 100%; margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--deep); font: 700 13.5px "Zen Kaku Gothic New", sans-serif; cursor: pointer; transition: background-color .15s ease; }
.tl-all:hover { background: #FBFAF6; }
.tl-all:focus-visible { outline: 2px solid var(--deep); outline-offset: 2px; }
.tl-y { font: 700 16px "Shippori Mincho", serif; color: var(--gold); }
.tl-t { font-weight: 700; color: var(--ink); }
.tl-t:hover, .tl a:hover, .rm a:hover, .pp2 a:hover { color: var(--jade); }
.tl-e, .tl-v { color: #4A544F; }
.tl-s { font: 500 12.5px "IBM Plex Mono", monospace; color: var(--ink); text-align: right; }

/* ------------------------------------------------------------------ recent matches */
.rm { padding: 6px 24px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.rm-h, .rm-r { display: grid; grid-template-columns: minmax(0, 1.5fr) 130px minmax(0, 1.2fr) 150px 70px; gap: 16px; align-items: center; }
.rm-h { padding: 12px 0 10px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8C938F; }
.rm-h span:nth-child(n+4) { text-align: right; }
.rm-r { padding: 10px 0; font-size: 13.5px; }
.rm-r + .rm-r { border-top: 1px solid var(--hair); }
.rm-r + .rm-same { border-top-color: transparent; padding-top: 0; }
.rm-t a { font-weight: 700; color: var(--ink); }
.rm-t small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.rm-rd { font-size: 12.5px; color: var(--muted); }
.rm-o { color: #3E4944; }
.rm-s { font: 500 12.5px "IBM Plex Mono", monospace; color: var(--ink); text-align: right; }
.rm-s em { font: 700 10px "Zen Kaku Gothic New", sans-serif; text-transform: uppercase; letter-spacing: .08em; font-style: normal; color: #A6562F; }
.rm-res { justify-self: end; padding: 3px 8px; border-radius: 5px; font-size: 11.5px; font-weight: 700; }
.rm-won { background: #E4EFE9; color: #1E6B4E; }
.rm-lost { background: #F4F0E6; color: #7B847F; }
.rm-unknown { color: #A7ADA9; }

/* ------------------------------------------------------------------ partners and rivals */
.pr2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.pp2 { padding: 20px 24px 10px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.pp2 h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--gold); }
.pp2 ul { list-style: none; margin: 0; padding: 0; }
.pp2 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 0; }
.pp2 li + li { border-top: 1px solid var(--hair); }
.pp2 a { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.pp2 span { grid-row: 2; font-size: 12px; color: var(--muted); }
.pp2 b { grid-row: 1 / span 2; align-self: center; font: 600 14px "IBM Plex Mono", monospace; color: var(--ink); }
.pp2 b.up { color: #1E6B4E; }
.pp2 b.dn { color: #A6562F; }

/* ------------------------------------------------------------------ the way into the API */
.py-end { padding: 72px 0 96px; }
.py-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; 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); }
.py-cta h2 { margin: 0; font: 700 24px/1.3 "Shippori Mincho", serif; color: #fff; }
.py-cta p { margin: 8px 0 0; max-width: 640px; font-size: 14.5px; color: rgba(255,255,255,.72); }
.py-cta code { padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.07); color: var(--gold-lt); }
.py-cta-go { display: flex; align-items: center; gap: 12px; flex: none; }
.py-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; }
.py-key:hover { background: #D4B25F; }
.py-key:focus-visible, .py-doc:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
.py-g { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: #fff; }
.py-g svg { width: 17px; height: 17px; }
.py-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; }
.py-doc:hover { border-color: var(--gold-lt); }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
.py-top-row { flex-direction: column; align-items: flex-start; gap: 26px; }
.tl li { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) 130px; }
.tl-v { grid-column: 2 / span 2; grid-row: 2; font-size: 12.5px; }
.rm-h, .rm-r { grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1fr) 130px 64px; gap: 12px; }
}
@media (max-width: 960px) {
.py-lead-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.py-lead-in .pk:last-child { grid-column: 1 / -1; }
.py-hd { flex-direction: column; align-items: flex-start; gap: 10px; }
.py-hd > p { text-align: left; }
.pr2 { grid-template-columns: minmax(0, 1fr); }
.py-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
.py-in { padding: 0 16px; }
.py-top .py-in { padding-bottom: 92px; }
.py-top h1 { font-size: 32px; }
.py-facts div { padding: 0 14px; }
.py-facts dt { font-size: 21px; }
.py-lead-in { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: -68px; }
.pk { padding: 18px 16px 16px; }
.py-hd h2 { font-size: 25px; }
.lg { flex-wrap: wrap; gap: 8px 14px; }
.ss { padding: 20px 14px 14px; }
.ss-plot { height: 170px; gap: 1px; }
.ss-bar em { min-width: 14px; height: 14px; font-size: 9px; }
.tl, .rm { padding: 4px 16px; }
.tl li { grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; }
.tl-y { grid-row: 1 / span 4; }
.tl-v { grid-column: 2; grid-row: auto; }
.tl-s { text-align: left; }
.rm-h { display: none; }
.rm-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t t" "o r" "d s"; gap: 3px 12px; }
.rm-t { grid-area: t; margin-bottom: 4px; }
.rm-same .rm-t { display: none; }
.rm-o { grid-area: o; }
.rm-res { grid-area: r; }
.rm-rd { grid-area: d; }
.rm-s { grid-area: s; }
.pp2 { padding: 18px 16px 8px; }
.py-cta { padding: 24px 20px; }
.py-cta h2 { font-size: 21px; }
.py-cta-go { flex-wrap: wrap; }
}