/* Phins. One calm column that reads like a shoreline: pale sky at the top, a waterline, deep water for the
   record, sand at the foot. Rows and hairlines, not boxes. The sun appears once, in the logo. */
:root {
  --sky: #F3F7F7;        /* page ground: sea mist */
  --foam: #FFFFFF;       /* the one raised surface */
  --shallows: #E5EFF0;   /* tracks, chips, quiet fills */
  --water: #E2EEF0;      /* the shallows, just under the waterline */
  --ink: #0E2A47;        /* deep navy, from the logo */
  --ink-2: #3F566B;      /* secondary text */
  --ink-3: #5C7082;      /* labels and captions */
  --line: #D3DFE1;       /* hairlines */
  --sea: #2F8FB3;        /* left fighter */
  --accent: #2F8FB3;     /* the fin, the waterline, underlines: a theme may change this one */
  --shell: #C97B63;      /* right fighter */
  --link: #1B6585;
  --btn: #0E2A47;
  --btn-ink: #F3F7F7;
  --deep: #0E2A47;       /* the deep-water band */
  --deep-ink: #EAF2F5;
  --deep-2: #B3C7D5;
  --deep-line: rgba(234, 242, 245, 0.2);
  --sand: #F2EDE3;       /* the foot of the page */
  --sun: #F9C22E;
  --logo-ink: #0E2A47;
  --logo-sea: #2F8FB3;
  --shadow: 0 1px 2px rgba(14, 42, 71, 0.05), 0 18px 40px -18px rgba(14, 42, 71, 0.22);
  --display: 'Outfit', 'Figtree', system-ui, sans-serif;
  --text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky: #0B1A29; --foam: #11263B; --shallows: #173149; --water: #10283D; --ink: #E6EFF3; --ink-2: #AFC1CF; --ink-3: #8CA0B1;
    --line: #20394F; --sea: #2F8FB3; --shell: #C97B63; --link: #7CC4DF; --btn: #E6EFF3; --btn-ink: #0B1A29;
    --deep: #071320; --deep-ink: #E6EFF3; --deep-2: #A3B8C8; --deep-line: rgba(230, 239, 243, 0.16); --sand: #0F2236;
    --sun: #F9C22E; --logo-ink: #EAF3F2; --logo-sea: #6FC3DF;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky: #0B1A29; --foam: #11263B; --shallows: #173149; --water: #10283D; --ink: #E6EFF3; --ink-2: #AFC1CF; --ink-3: #8CA0B1;
  --line: #20394F; --sea: #2F8FB3; --shell: #C97B63; --link: #7CC4DF; --btn: #E6EFF3; --btn-ink: #0B1A29;
  --deep: #071320; --deep-ink: #E6EFF3; --deep-2: #A3B8C8; --deep-line: rgba(230, 239, 243, 0.16); --sand: #0F2236;
  --sun: #F9C22E; --logo-ink: #EAF3F2; --logo-sea: #6FC3DF;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Site themes (Settings). Shoreline above is the default. Each theme has its own page color, ink, buttons, accent and logo colors,
   taken from the logo options: Surf Shop (navy, sand, hibiscus), Boardwalk (palm green, cream, sun), Clean (ink, white, lagoon).
   The two fighter colors stay the same in all of them. Every pairing of text and ground here was checked for contrast. */
:root[data-look="surfshop"] {
  --sky: #F6E8CC; --foam: #FFF9EC; --shallows: #EBD9B3; --water: #EFDDB8; --ink: #12294B; --ink-2: #3A4963; --ink-3: #55596A; --line: #DCC79B;
  --link: #9C2148; --btn: #EF5B7B; --btn-ink: #0C1E3A; --accent: #D63C66; --deep: #12294B; --deep-ink: #F6E8CC; --deep-2: #C3CBD8;
  --deep-line: rgba(246, 232, 204, 0.2); --sand: #EAD6AC; --logo-ink: #12294B; --logo-sea: #E24F72;
}
:root[data-look="surfshop"][data-theme="dark"] {
  --sky: #12294B; --foam: #1B3766; --shallows: #234273; --water: #17315A; --ink: #F6E8CC; --ink-2: #D0CCC4; --ink-3: #A9B1C0; --line: #2D4A7A;
  --link: #F892AB; --btn: #EF5B7B; --btn-ink: #0C1E3A; --accent: #EF5B7B; --deep: #0B1B36; --deep-ink: #F6E8CC; --deep-2: #AEB9C6;
  --deep-line: rgba(246, 232, 204, 0.16); --sand: #0E2140; --logo-ink: #F6E8CC; --logo-sea: #EF5B7B;
}
:root[data-look="surfshop"] .brand { background: url(logo-surfshop.svg?v=6be4f957) center / contain no-repeat; }
:root[data-look="surfshop"][data-theme="dark"] .brand { background-image: url(logo-surfshop-dark.svg?v=6be4f957); }
:root[data-look="boardwalk"] {
  --sky: #FFF4DC; --foam: #FFFCF3; --shallows: #F3E5C0; --water: #F8EBCA; --ink: #123C33; --ink-2: #36564D; --ink-3: #52655C; --line: #E4D3A6;
  --link: #17604F; --btn: #17604F; --btn-ink: #FFF4DC; --accent: #B87A00; --deep: #145646; --deep-ink: #FFF4DC; --deep-2: #C9DED6;
  --deep-line: rgba(255, 244, 220, 0.2); --sand: #F3E5C0; --logo-ink: #17604F; --logo-sea: #2E9C80;
}
:root[data-look="boardwalk"][data-theme="dark"] {
  --sky: #0C342B; --foam: #114034; --shallows: #174F41; --water: #0E3A30; --ink: #FFF4DC; --ink-2: #CFDDD2; --ink-3: #A9C2B8; --line: #22604F;
  --link: #8FDCC5; --btn: #F7B32B; --btn-ink: #123C33; --accent: #F7B32B; --deep: #082620; --deep-ink: #FFF4DC; --deep-2: #A9C2B8;
  --deep-line: rgba(255, 244, 220, 0.16); --sand: #0A2C24; --logo-ink: #FFF4DC; --logo-sea: #7FD0B8;
}
:root[data-look="boardwalk"] .brand { background: url(logo-boardwalk.svg?v=6be4f957) center / contain no-repeat; }
:root[data-look="boardwalk"][data-theme="dark"] .brand { background-image: url(logo-boardwalk-dark.svg?v=6be4f957); }
:root[data-look="clean"] {
  --sky: #FFFFFF; --foam: #FFFFFF; --shallows: #EEF1F4; --water: #F4F6F8; --ink: #101828; --ink-2: #3D4757; --ink-3: #5B6676; --line: #DDE2E8;
  --link: #0A7166; --btn: #0B7F72; --btn-ink: #FFFFFF; --accent: #12A594; --deep: #101828; --deep-ink: #FFFFFF; --deep-2: #B4BCC8;
  --deep-line: rgba(255, 255, 255, 0.2); --sand: #F4F6F8; --logo-ink: #101828; --logo-sea: #12A594;
}
:root[data-look="clean"][data-theme="dark"] {
  --sky: #101828; --foam: #1A2436; --shallows: #222D41; --water: #151E30; --ink: #FFFFFF; --ink-2: #C3CAD5; --ink-3: #98A2B3; --line: #2A3549;
  --link: #45D6C4; --btn: #19BFA9; --btn-ink: #0B1220; --accent: #19BFA9; --deep: #0A101C; --deep-ink: #FFFFFF; --deep-2: #A7B1BE;
  --deep-line: rgba(255, 255, 255, 0.16); --sand: #0C1422; --logo-ink: #FFFFFF; --logo-sea: #19BFA9;
}
:root[data-look="clean"] .brand { background: url(logo-clean.svg?v=6be4f957) center / contain no-repeat; }
:root[data-look="clean"][data-theme="dark"] .brand { background-image: url(logo-clean-dark.svg?v=6be4f957); }
:root[data-look] .brand img { visibility: hidden; }

*, *::before, *::after { box-sizing: border-box; }
html.lang-wait body { visibility: hidden; }      /* another language is chosen: wait a moment for its words instead of flashing English */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.lede { font-size: 19px; color: var(--ink-2); max-width: 36em; }
.small { font-size: 14.5px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* top: logo left, tabs centred, account and search right */
/* The top bar runs the full width of the window: logo at the far left, account and search at the far right, tabs centred between. */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px 24px; padding-block: 18px; max-width: none; padding-inline: clamp(16px, 3vw, 44px); }
.searchbar .wrap { max-width: none; padding-inline: clamp(16px, 3vw, 44px); }
.brand { display: block; width: 140px; line-height: 0; justify-self: start; }
.brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
.brand svg, .brand img { display: block; width: 100%; height: auto; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 26px; font-size: 15.5px; font-weight: 500; }
.nav a { padding: 8px 0; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.tools { display: flex; align-items: center; justify-self: end; gap: 6px 12px; }
.login { padding: 8px 4px; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.login:hover { text-decoration: underline; }
.icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.icon:hover { background: var(--shallows); }
/* The top bar when accounts are on. <html data-user="in"> is set before the page is drawn, so nothing flickers. */
.tools [data-in] { display: none; }
html[data-user="in"] .tools [data-out] { display: none; }
html[data-user="in"] .tools .premium[data-in] { display: inline-flex; }
html[data-user="in"] .tools .acct-menu[data-in] { display: block; }
.premium .narrow { display: none; }
.acct-menu { position: relative; }
.acct-menu .who { box-shadow: inset 0 0 0 1.5px var(--line); }
.acct-menu:hover .who, .acct-menu:focus-within .who { background: var(--shallows); }
.acct-menu .panel { position: absolute; top: 100%; right: 0; z-index: 40; width: 300px; padding-top: 10px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; }
.acct-menu:hover .panel, .acct-menu:focus-within .panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.16s ease, transform 0.16s ease; }
.acct-menu .sheet { display: flex; flex-direction: column; padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--foam); box-shadow: var(--shadow); text-align: left; }
.acct-menu .hello { font: 600 19px var(--display); letter-spacing: -0.01em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu nav { display: flex; flex-direction: column; margin-top: 8px; }
.acct-menu nav a, .acct-menu nav button { padding: 8px 0; border: 0; background: none; color: var(--ink-2); font: 500 15.5px var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.acct-menu nav a:hover, .acct-menu nav button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.acct-menu .fol { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.acct-menu .fol .h { display: flex; align-items: baseline; justify-content: space-between; }
.acct-menu .fol .h b { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.acct-menu .fol .h a { color: var(--link); font-size: 14px; font-weight: 600; text-decoration: none; }
.acct-menu .fol ul { list-style: none; margin: 6px 0 0; padding: 0; }
.acct-menu .fol li a { display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--ink); text-decoration: none; }
.acct-menu .fol li .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.acct-menu .fol li b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu .fol li .t span { font-size: 13px; color: var(--ink-3); }
.acct-menu .fol li a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.acct-menu .fol p { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
/* A short message at the foot of the screen that goes away by itself. */
.toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: max-content; max-width: min(92vw, 460px); padding: 11px 20px; border-radius: 999px;
  background: var(--btn); color: var(--btn-ink); font: 600 15px var(--text); text-align: center; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 10px);
  transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-radius: 14px; }

/* A fighter's avatar: initials on the color of their weight class, lighter above the waterline. A designed mark, not a likeness. */
.av { position: relative; flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: var(--av, #5C6B7A); color: #fff; font: 600 12.5px/1 var(--display); letter-spacing: 0.03em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.av::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.17);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H40V23C33 27 27 19 20 23S7 27 0 23Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H40V23C33 27 27 19 20 23S7 27 0 23Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* A supplied picture, over the initials. A fighter can have a version for dark pages, one for light pages and one with no background;
   each picture's classes say where it belongs (n = the page's own dark or light behind it, c = the weight-class color behind it,
   d = dark pages, l = light pages) and only the one that fits is shown. Settings chooses between n and c. */
.av.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: none; }
:root[data-theme="dark"]:not([data-pics]) .av.pic img.nd, :root[data-theme="light"]:not([data-pics]) .av.pic img.nl,
:root[data-theme="dark"][data-pics="class"] .av.pic img.cd, :root[data-theme="light"][data-pics="class"] .av.pic img.cl { display: block; }
.av.pic { color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }        /* the theme's accent ring, the same color as the title tags */
.av.pic.lg { box-shadow: 0 0 0 2px var(--accent); }
:root:not([data-pics]) .av.pic { background: var(--sky); }               /* "Match the Page": the theme's own page color behind a see-through picture */
:root:not([data-pics]) .av.pic::before { display: none; }
.av.pic.nopic { color: #fff; background: var(--av, #5C6B7A); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }      /* the picture did not load: the initials again */
.av.pic.nopic img { display: none !important; }
.av.pic.nopic::before { display: block !important; }
.av.sm { width: 30px; height: 30px; font-size: 11px; }
.av.md { width: 48px; height: 48px; font-size: 17px; }
.av.lg { width: 92px; height: 92px; font-size: 33px; letter-spacing: 0.02em; }
.av-hw { --av: #2A4D7E; } .av-lhw { --av: #1F5A8A; } .av-mw { --av: #1B6F86; } .av-ww { --av: #1C7A72; } .av-lw { --av: #2F7A4F; } .av-fw { --av: #6B7A2A; }
.av-bw { --av: #8A6424; } .av-flw { --av: #A2543A; } .av-wsw { --av: #A0456A; } .av-wflw { --av: #7A4E96; } .av-wbw { --av: #4D5CA6; } .av-wfw { --av: #3A6EA5; }
.idhead { display: flex; align-items: center; gap: 18px; }
.idhead > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* search: a line that opens under the top bar */
.searchbar { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.32s ease, opacity 0.2s ease, visibility 0s linear 0.32s; }
.searchbar.open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 0.32s ease, opacity 0.25s ease; }
.searchbar > div { min-height: 0; overflow: hidden; }
.searchline { position: relative; display: flex; align-items: center; gap: 12px; padding: 6px 0 8px 2px; color: var(--ink-3); }
.searchline::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.5s ease 0.08s; }
.searchbar.open .searchline::after { width: 100%; }
.searchline input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 22px var(--display); }
.searchline input::placeholder { color: var(--ink-3); }
.searchline input::-webkit-search-cancel-button { display: none; }
.hits { list-style: none; margin: 0; padding: 4px 0 20px; }
.hits a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 11px 6px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.hits a:hover, .hits a:focus-visible { background: var(--shallows); }
.hits b { font-weight: 600; }
.hits .h { display: flex; align-items: center; gap: 10px; }
.hits span, .hits .none { font-size: 14.5px; color: var(--ink-3); }
.hits .none { padding: 12px 6px; }

/* buttons and links */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 16px; text-decoration: none; }
.btn:hover { opacity: 0.9; }
.btn.small { padding: 9px 16px; font-size: 14.5px; white-space: nowrap; }
.who { color: inherit; text-decoration: none; }
.who:hover { text-decoration: underline; }
.btn.ghost { background: transparent; color: var(--deep-ink); box-shadow: inset 0 0 0 1px var(--deep-line); }
.more { font-weight: 600; text-decoration: none; white-space: nowrap; padding: 8px 0; }
.more::after { content: "\2192"; display: inline-block; margin-left: 6px; transition: transform 0.15s; }
.more:hover::after { transform: translateX(3px); }
.back { display: inline-block; padding: 8px 0; font-weight: 600; font-size: 15.5px; text-decoration: none; }
.back::before { content: "\2190"; margin-right: 6px; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 56px; padding-block: 44px 64px; }
.hero > div { min-width: 0; }
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); letter-spacing: -0.03em; }
.hero .lede { margin-top: 20px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.facts div { display: flex; flex-direction: column; }
.facts b { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.facts span { font-size: 14.5px; color: var(--ink-3); }

/* the one raised surface: a featured forecast */
.feature { display: flex; flex-direction: column; gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--foam); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.duel { display: flex; justify-content: space-between; gap: 16px; }
.duel > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.duel > div:last-child { align-items: flex-end; text-align: right; }
.duel .name { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); }
.duel > div:last-child .name { flex-direction: row-reverse; }
.duel .pick .name { color: var(--ink); }
.duel .pct { font-family: var(--display); font-size: 46px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink-2); }
.duel .pick .pct { color: var(--ink); }
.bar { display: flex; gap: 2px; height: 8px; }
.bar i { display: block; border-radius: 4px; min-width: 4px; }
.bar i:first-child { background: var(--sea); border-radius: 4px 1px 1px 4px; }
.bar i:last-child { flex: 1 1 0; background: var(--shell); border-radius: 1px 4px 4px 1px; }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.keys div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
.keys b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* confidence: four dots, filled to the level */
.conf { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--ink); }

/* the waterline: sky above, the shallows below, one fin */
.waterline { position: relative; height: 36px; }
.waterline svg.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 14px; }
.waterline .fill { fill: var(--water); }
.waterline .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.waterline svg.fin { position: absolute; right: max(16%, 44px); bottom: 5px; width: 30px; height: 29px; color: var(--accent); }
.shore { background: linear-gradient(to bottom, var(--water), var(--sky) 340px); }

/* sections */
.section { padding-block: 64px; }
.section.tight { padding-block: 40px; }
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.head > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.head h2, .page-title { font-size: clamp(28px, 3.6vw, 36px); }
.page-head { display: flex; flex-direction: column; gap: 10px; padding-block: 28px 8px; }
h1.page-title { font-size: clamp(34px, 4.8vw, 48px); letter-spacing: -0.03em; }

/* the board: one row per fight */
.board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.board li { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 4ch minmax(110px, 240px) 4ch minmax(0, 1fr) 150px; grid-template-areas: ". . meta . . ." "a pa bar pb b tag"; align-items: center; column-gap: 14px; row-gap: 2px; padding: 12px 4px 16px; color: var(--ink); text-decoration: none; }
.row:hover { background: var(--shallows); }
.row .meta { grid-area: meta; text-align: center; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .a { grid-area: a; text-align: right; justify-content: flex-end; }
.row .b { grid-area: b; }
.row .a, .row .b { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.row .pa { grid-area: pa; text-align: right; }
.row .pb { grid-area: pb; }
.row .pa, .row .pb { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.row .won { color: var(--ink); font-weight: 650; }
.row .bar { grid-area: bar; height: 6px; }
.row .tag { grid-area: tag; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.row .result { font-size: 13px; color: var(--ink-3); text-align: right; }

/* deep water */
.deep-edge { display: block; width: 100%; height: 14px; color: var(--deep); margin-bottom: -1px; }
.deep { background: var(--deep); color: var(--deep-ink); }
.deep .wrap { padding-block: 60px 68px; display: flex; flex-direction: column; gap: 32px; }
.deep .lede { color: var(--deep-2); }
.deep .eyebrow { color: var(--deep-2); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 40px; }
.figures div { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--deep-line); }
.figures b { font-family: var(--display); font-size: 52px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.figures span { color: var(--deep-2); font-size: 15.5px; max-width: 24em; }
.deep .note { color: var(--deep-2); font-size: 14.5px; max-width: 46em; }
.deep a:not(.btn) { color: var(--deep-ink); }

/* short ranked lists on the home page */
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 56px; }
.pair > div { min-width: 0; }
.rank { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--line); }
.rank li { display: grid; grid-template-columns: 2ch 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.rank .n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rank .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
.rank .who b { font-weight: 600; }
.rank .who span { font-size: 14px; color: var(--ink-3); }
.rank .r { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }

/* what a forecast holds */
.holds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 36px; }
.holds div { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.holds h3 { font-size: 19px; letter-spacing: -0.01em; }
.holds p { font-size: 15.5px; color: var(--ink-2); }

/* questions */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 2px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 2px 18px; color: var(--ink-2); max-width: 60ch; }

/* foot */
.foot { margin-top: 32px; background: var(--sand); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 56px; padding-block: 40px 48px; }
.foot .brand { width: 168px; }
.foot .words { display: flex; flex-direction: column; gap: 6px; max-width: 46em; font-size: 14.5px; color: var(--ink-2); }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-top: 6px; }
.foot nav a { padding: 6px 0; }
.foot nav.legal { align-items: baseline; padding-top: 0; }
.foot nav.legal b { font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.foot .copy { padding-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.prose.legal { padding-bottom: 40px; }
.prose.legal h2 { font-size: 20px; margin-top: 18px; }

/* a fight */
.versus { display: flex; flex-direction: column; gap: 20px; padding-block: 12px 36px; }
.versus .duel .name { font-family: var(--display); font-size: clamp(22px, 3.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.versus .duel .pct { font-size: clamp(52px, 9vw, 88px); }
.versus .bar { height: 10px; }
.versus .bar i:first-child { border-radius: 5px 1px 1px 5px; }
.versus .bar i:last-child { border-radius: 1px 5px 5px 1px; }
.under { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "ra conf rb"; align-items: center; gap: 8px 24px; font-size: 15.5px; color: var(--ink-2); }
.under > :first-child { grid-area: ra; }
.under > .conf { grid-area: conf; }
.under > :last-child { grid-area: rb; text-align: right; }
.under b { color: var(--ink); font-variant-numeric: tabular-nums; }
.part { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px 48px; padding-block: 32px; border-top: 1px solid var(--line); }
.part > header { display: flex; flex-direction: column; gap: 6px; }
.part h2 { font-size: 22px; letter-spacing: -0.015em; }
.part > header p { font-size: 14.5px; color: var(--ink-3); }
.part > div { min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.legend { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--sea); }
.sw.b { background: var(--shell); }
.fly { display: grid; grid-template-columns: 4ch minmax(0, 1fr) 96px minmax(0, 1fr) 4ch; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.fly .l { display: flex; justify-content: flex-end; }
.fly .l i, .fly .r i { display: block; height: 8px; min-width: 3px; }
.fly .l i { background: var(--sea); border-radius: 4px 0 0 4px; }
.fly .r i { background: var(--shell); border-radius: 0 4px 4px 0; }
.fly .what { text-align: center; font-size: 15px; color: var(--ink-2); }
.fly b { font-weight: 600; }
.fly b:last-child { text-align: right; }
.bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) 4ch; align-items: center; gap: 9px 12px; font-size: 15px; font-variant-numeric: tabular-nums; }
.bars span { color: var(--ink-2); }
.bars i { display: block; height: 8px; min-width: 3px; background: var(--ink-3); border-radius: 0 4px 4px 0; }
.bars b { text-align: right; font-weight: 600; }
.gap { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 10px 14px; font-size: 15px; }
.gap > span { color: var(--ink-2); }
.gap .mid { display: grid; grid-template-columns: 1fr 1fr; height: 8px; }
.gap .mid > span { display: flex; }
.gap .mid > span:first-child { justify-content: flex-end; border-right: 1px solid var(--ink-3); }
.gap .mid i { display: block; height: 8px; min-width: 3px; }
.gap .mid > span:first-child i { background: var(--sea); border-radius: 4px 0 0 4px; }
.gap .mid > span:last-child i { background: var(--shell); border-radius: 0 4px 4px 0; }
.gap b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sums { display: flex; flex-wrap: wrap; gap: 12px 40px; padding-top: 14px; border-top: 1px solid var(--line); }
.sums div { display: flex; flex-direction: column; font-size: 14.5px; color: var(--ink-3); }
.sums b { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.notes { margin: 0; padding-left: 18px; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.nextprev { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px; border-top: 1px solid var(--line); }

/* tables */
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th { padding: 10px 12px 10px 2px; text-align: left; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 12px 11px 2px; border-bottom: 1px solid var(--line); vertical-align: baseline; }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; }
th:last-child, td:last-child { padding-right: 2px; }
td.rk { width: 3ch; color: var(--ink-3); font-variant-numeric: tabular-nums; }
td.who b { font-weight: 600; }
td.who .cell { display: flex; align-items: center; gap: 10px; }
td.who .txt span { display: block; font-size: 13.5px; color: var(--ink-3); }
td.big { font-family: var(--display); font-weight: 600; font-size: 17px; }
td .rng { display: block; font-size: 13.5px; color: var(--ink-3); font-family: var(--text); font-weight: 400; }
.move { white-space: nowrap; color: var(--ink-2); }
.move svg { width: 8px; height: 7px; margin-right: 5px; fill: currentColor; }
.mark { font-weight: 600; white-space: nowrap; }
.mark svg { width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.three { table-layout: fixed; }
.three td, .three th { width: 30%; }
.three td:nth-child(2), .three th:nth-child(2) { width: 40%; text-align: center; color: var(--ink-2); font-size: 15px; }
.three td:last-child, .three th:last-child { text-align: right; }
.three th span { display: inline-flex; align-items: center; gap: 8px; }
.three th { white-space: normal; vertical-align: bottom; }

/* choosers */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button, .seg a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: 500 15px var(--text); text-decoration: none; cursor: pointer; min-height: 40px; }
.seg button:hover, .seg a:hover { border-color: var(--ink-3); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.boardset { padding-top: 28px; display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.boardset h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 24px; }
.boardset h2 span { font: 500 15px var(--text); letter-spacing: 0; color: var(--ink-3); }
.modes { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 8px; }
.switch { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 999px; background: var(--shallows); }
.switch button { min-height: 40px; padding: 8px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 15.5px var(--text); cursor: pointer; }
.switch button[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
.modenote { max-width: 62ch; font-size: 15.5px; color: var(--ink-2); }
.modenote b { color: var(--ink); font-weight: 600; }

/* "at least" */
.atleast { display: flex; flex-direction: column; gap: 16px; }
.atleast label { font-size: 17px; }
.atleast output { font-weight: 700; font-variant-numeric: tabular-nums; }
.atleast input[type="range"] { width: 100%; accent-color: var(--link); height: 28px; }
.atleast .out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.atleast .out div { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; color: var(--ink-2); }
.atleast .out div:last-child { align-items: flex-end; text-align: right; }
.atleast .out span { display: inline-flex; align-items: center; gap: 8px; }
.atleast .out b { font-family: var(--display); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }

/* record */
.status { display: flex; flex-direction: column; gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--foam); box-shadow: var(--shadow); }
.status .big { font-family: var(--display); font-size: clamp(40px, 7vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.tiers { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 12px 14px; font-size: 15.5px; }
.tiers .t { display: flex; flex-direction: column; }
.tiers .t span { font-size: 13.5px; color: var(--ink-3); }
.tiers .track { height: 8px; background: var(--shallows); border-radius: 4px; overflow: hidden; }
.tiers .track i { display: block; height: 8px; background: var(--sea); border-radius: 0 4px 4px 0; }
.tiers b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.plot { width: 100%; max-width: 420px; height: auto; display: block; }
.plot .grid { stroke: var(--line); stroke-width: 1; }
.plot .ideal { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.plot text { fill: var(--ink-3); font: 12px var(--text); }
.plot circle { fill: var(--sea); stroke: var(--sky); stroke-width: 2; }
.plot.wide { max-width: none; }
.plot .line { fill: none; stroke: var(--sea); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot .end { fill: var(--ink); font: 600 13px var(--text); }
.fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fig figcaption { font-size: 13.5px; color: var(--ink-3); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 40px; align-items: start; }
.split > * { min-width: 0; }

/* a fighter's profile */
.bio { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 10px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.bio div { display: flex; flex-direction: column; gap: 2px; }
.bio dt { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.bio dd { margin: 0; font-family: var(--display); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nextfight { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "eb eb eb" "line chance more"; align-items: center; gap: 6px 28px; margin-block: 20px 28px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--foam); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.nextfight .eyebrow { grid-area: eb; }
.nextfight .line { grid-area: line; display: flex; flex-direction: column; min-width: 0; }
.nextfight .line b { font-family: var(--display); font-size: 22px; font-weight: 600; }
.nextfight .line span { font-size: 14.5px; color: var(--ink-3); }
.nextfight .chance { grid-area: chance; display: flex; flex-direction: column; font-size: 13.5px; color: var(--ink-3); }
.nextfight .chance b { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--ink); }
.nextfight .more { grid-area: more; }
.eloview { display: flex; flex-direction: column; gap: 14px; }
.js .nojs { display: none; }
.rank.plain li { grid-template-columns: 34px minmax(0, 1fr) auto; }
.lean { display: flex; flex-direction: column; gap: 10px; }
.lean p b { font-weight: 600; }
.leanbar { position: relative; height: 8px; margin-inline: 8px; border-radius: 4px; background: var(--shallows); }
.leanbar i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid var(--sky); border-radius: 50%; background: var(--sea); }
.leanends { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-3); }
.elo-now { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 40px; }
.elo-now > div { display: flex; flex-direction: column; font-size: 14.5px; color: var(--ink-3); }
.elo-now b { font-family: var(--display); font-size: clamp(52px, 9vw, 76px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }
.elo-now .minor b { font-size: 26px; line-height: 1.2; letter-spacing: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 13px; border-radius: 999px; background: var(--shallows); color: var(--ink); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.chip:hover { text-decoration: underline; }
.explain { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 16px; background: var(--shallows); }
.explain h3 { font-size: 18px; letter-spacing: -0.01em; }
.explain p { font-size: 15.5px; color: var(--ink-2); }
.acct { max-width: 460px; display: flex; flex-direction: column; gap: 18px; padding-block: 8px 56px; }
.acct form, .acct [data-panel] { display: flex; flex-direction: column; gap: 16px; }
.acct [data-panel][hidden] { display: none; }
.acct h2 { margin-top: 10px; font-size: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.field input { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--foam); color: var(--ink); font: 400 17px var(--text); }
.field input[readonly] { color: var(--ink-3); background: var(--shallows); cursor: not-allowed; }
.agree { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.agree input { flex: none; width: 21px; height: 21px; margin: 1px 0 0; accent-color: var(--link); cursor: pointer; }
.agree.need { color: var(--ink); }
.agree.need input { outline: 2px solid #D64545; outline-offset: 2px; }
.field input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; border-color: transparent; }
.notice { padding: 12px 16px; border-radius: 12px; background: var(--shallows); color: var(--ink); font-size: 15.5px; }
.notice.bad { border-left: 3px solid var(--shell); border-radius: 4px 12px 12px 4px; }
.linklike { padding: 6px 0; border: 0; background: none; color: var(--link); font: 500 15px var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.btn { border: 0; cursor: pointer; font-family: var(--text); }
button.btn:disabled { opacity: 0.6; cursor: default; }
.following { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.following li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.following a { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--ink); }
.following a .t { display: flex; flex-direction: column; min-width: 0; }
.following a b { font-weight: 600; }
.following a .t span { font-size: 13.5px; color: var(--ink-3); }
.acct .hint { font-size: 15.5px; color: var(--ink-2); }
.manage .hint { margin: -8px 0 2px; font-size: 13.5px; color: var(--ink-3); }
.acct .sent { font-size: 18px; color: var(--ink); overflow-wrap: anywhere; }
.waitline { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 600; }
.waitline.on::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.swap { padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); }
.swap a { color: var(--link); font-weight: 600; }
.manage { max-width: 900px; }
.manage [data-panel="in"] { display: flex; flex-direction: column; }
.manage .pref { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: start; }
.manage .pref .ctl { justify-self: stretch; }
.manage .pref .ctl:empty { display: none; }
.manage form { display: flex; flex-direction: column; gap: 14px; }
.acct form .actions, .manage form .actions { margin-top: 6px; }
.manage .value { display: block; font-weight: 600; font-size: 17px; color: var(--ink); overflow-wrap: anywhere; }
.manage .plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.manage .links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.manage .following { border-top: 0; }
.manage .following li:first-child { padding-top: 0; }
.linklike.danger { color: #E5484D; }
:root[data-theme="light"] .linklike.danger { color: #B4232A; }
.btn.danger { background: #C2362F; color: #FFFFFF; }
.soon { display: inline-block; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
@media (max-width: 720px) { .manage .pref { grid-template-columns: minmax(0, 1fr); } }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.acts:empty { display: none; }
.follow { align-self: flex-start; min-height: 40px; padding: 8px 20px; border: 1px solid var(--btn); border-radius: 999px; background: transparent; color: var(--ink); font: 600 15px var(--text); cursor: pointer; }
.follow[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); }
/* the Record page: the score, then the Card Reports */
.scoreline { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 28px 48px; }
.scoreline .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reports { border-top: 1px solid var(--line); }
.report { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 32px; padding: 22px 2px; border-bottom: 1px solid var(--line); }
.report .what { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.report h3 { font-size: 22px; letter-spacing: -0.015em; }
.report p { color: var(--ink-2); }
.report p b { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); }
.report details { grid-column: 1 / -1; }
.tally { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tally i { width: 12px; height: 12px; border-radius: 50%; }
.tally .hit { background: var(--ink); }
.tally .miss { box-shadow: inset 0 0 0 2px var(--ink-3); }
.tally .void { width: 12px; height: 2px; margin-top: 5px; border-radius: 1px; background: var(--ink-3); }
.report details > summary, details.picks > summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--link); font-weight: 600; font-size: 15px; cursor: pointer; list-style: none; }
.report details > summary::-webkit-details-marker, details.picks > summary::-webkit-details-marker { display: none; }
.report details > summary::before, details.picks > summary::before { content: "+"; display: inline-block; width: 1ch; font-weight: 500; }
.report details[open] > summary::before, details.picks[open] > summary::before { content: "\2212"; }
.report details .scroll, details.picks .scroll { margin-top: 8px; }
.lastcard { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 0; border-block: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.lastcard b { color: var(--ink); font-weight: 600; }
.lastcard .more { margin-left: auto; padding: 0; color: var(--link); }
@media (max-width: 900px) { .scoreline { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .report { grid-template-columns: minmax(0, 1fr); } .lastcard .more { margin-left: 0; } }

/* settings and language */
.prefs { display: flex; flex-direction: column; max-width: 820px; padding-block: 4px 56px; }
.pref { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 40px; padding-block: 22px; border-top: 1px solid var(--line); }
.pref h2 { font-size: 19px; letter-spacing: -0.01em; }
.pref p { margin-top: 4px; max-width: 46ch; font-size: 14.5px; color: var(--ink-3); }
.pref .ctl { justify-self: end; }
.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 190px)); gap: 10px; }
.look, .lang { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; }
.look b, .lang b { font-weight: 600; font-size: 15.5px; }
.look span:last-child, .lang span { font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.look[aria-pressed="true"], .lang[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.look:hover, .lang:hover { background: var(--shallows); }
.chips { display: flex; margin-bottom: 4px; }
.sample { display: flex; align-items: center; justify-content: space-between; gap: 10px; align-self: stretch; height: 58px; margin-bottom: 8px; padding: 0 10px 0 12px;
  border-radius: 9px; background: var(--on-light); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="dark"] .sample { background: var(--on-dark); }
.sample img { display: block; height: 26px; width: auto; max-width: 68%; }
.sample img.app { height: 34px; max-width: none; border-radius: 8px; box-shadow: 0 0 0 1px rgba(128, 140, 150, 0.35); }
.sample .for-dark, :root[data-theme="dark"] .sample .for-light { display: none; }
:root[data-theme="dark"] .sample .for-dark { display: block; }
.chips i { width: 18px; height: 18px; margin-right: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--line); }
.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--link); }
.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding-block: 8px 12px; }
@media (max-width: 720px) { .pref { grid-template-columns: minmax(0, 1fr); } .pref .ctl { justify-self: start; } }

.livebar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 14.5px; color: var(--ink-2); }
.livebar b { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); }
.livebar b.on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.livebar .src { font-size: 13.5px; color: var(--ink-3); }
.livebar .src a { color: inherit; }
.section > .livebar { margin: 6px 0 4px; }
@keyframes pulse { 50% { opacity: 0.25; } }
.final { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; padding: 12px 16px; border-radius: 12px; background: var(--shallows); font-size: 15.5px; color: var(--ink); text-align: center; }
.final b { font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
.final .right, .final .wrong { font-weight: 600; }
.versus > .livebar { justify-content: center; }
.elomain { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.part.elo .eloview { gap: 20px; }
.part.elo .cap { margin-top: -12px; font-size: 13.5px; color: var(--ink-3); }
.fig { position: relative; }
.plot.wide { touch-action: pan-y; cursor: crosshair; }
.plot.wide:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 8px; }
.plot .guide { stroke: var(--ink-3); stroke-width: 1; }
.plot circle.on { stroke-width: 3; }
.tip { position: absolute; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; padding: 8px 12px 9px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--foam); box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.tip[hidden] { display: none; }
.tip b { font: 600 22px/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.tip span + span { color: var(--ink-3); }
@media (min-width: 1001px) {
  .part.elo { grid-template-columns: minmax(0, 1fr); }
  .part.elo > div { max-width: none; }
  .part.elo .eloview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 8px 40px; align-items: end; }
  .part.elo .elomain { grid-column: 1; grid-row: 1; }
  .part.elo .eloview.nochart { align-items: start; }
  .part.elo .explain { grid-column: 2; grid-row: 1; }
  .part.elo .cap { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px 24px; }
.tiles div { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.tiles b { font-family: var(--display); font-size: 24px; font-weight: 600; }
.tiles span { font-size: 13.5px; line-height: 1.35; color: var(--ink-3); }
.history { border-top: 1px solid var(--line); }
.bout { border-bottom: 1px solid var(--line); }
.bout summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 14px; align-items: center; gap: 4px 14px; padding: 13px 2px; cursor: pointer; list-style: none; }
.bout summary::-webkit-details-marker { display: none; }
.bout summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform 0.2s; justify-self: center; margin-top: -4px; }
.bout[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.bout summary:hover { background: var(--shallows); }
.res { padding: 4px 0; border: 1px solid var(--ink-3); border-radius: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: var(--ink-2); }
.res.win { border-color: var(--btn); background: var(--btn); color: var(--btn-ink); }
.bout .vs { display: flex; flex-direction: column; min-width: 0; }
.bout .vs b { font-weight: 600; }
.bout .vs span, .bout .when span { font-size: 14px; color: var(--ink-3); }
.bout .how { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.titled { padding: 1px 7px; border: 1px solid var(--accent); border-radius: 6px; color: var(--ink); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.belts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.belt { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 7px 13px; border: 1px solid var(--accent); border-radius: 999px; font-size: 14.5px; }
.belt b { font-weight: 600; }
.belt.now { background: var(--accent); border-color: var(--accent); color: #0B1A29; }
.belt.now span { color: #0B1A29; opacity: 0.8; }
.belt span { color: var(--ink-3); font-size: 13.5px; }
.bout .when { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-size: 14.5px; color: var(--ink-2); max-width: 280px; }
.bout .inside { display: flex; flex-direction: column; gap: 10px; padding: 2px 2px 22px 66px; animation: reveal 0.25s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* the list of every fighter */
.letters { display: flex; flex-wrap: wrap; gap: 2px 4px; padding-block: 8px 4px; }
.letters a { min-width: 34px; padding: 7px 4px; border-radius: 8px; text-align: center; font-weight: 600; text-decoration: none; }
.letters a:hover { background: var(--shallows); }
.directory section { padding-block: 22px 6px; }
.directory h2 { font-size: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.az { list-style: none; margin: 12px 0 0; padding: 0; columns: 4 220px; column-gap: 32px; }
.az li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 0; break-inside: avoid; }
.az .t { display: flex; flex-direction: column; min-width: 0; }
.az a { font-weight: 600; text-decoration: none; }
.az a:hover { text-decoration: underline; }
.az .t span { font-size: 13.5px; color: var(--ink-3); }

/* prose */
.prose { max-width: 66ch; display: flex; flex-direction: column; gap: 14px; padding-block: 12px 24px; color: var(--ink-2); }
.prose h2 { margin-top: 26px; font-size: 24px; color: var(--ink); }
.prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.prose b { color: var(--ink); font-weight: 600; }

@media (max-width: 1000px) {
  .top { grid-template-columns: auto 1fr; grid-template-areas: "brand tools" "nav nav"; }
  .brand { grid-area: brand; width: 124px; }
  .tools { grid-area: tools; }
  .nav { grid-area: nav; justify-content: center; gap: 2px 20px; font-size: 15px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 24px 48px; }
  .part { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "meta tag" "a b" "pa pb" "bar bar"; column-gap: 16px; row-gap: 3px; padding: 14px 2px 18px; }
  .row .meta { text-align: left; white-space: normal; align-self: start; }
  .row .tag { align-self: start; margin-bottom: 6px; }
  .row .a { text-align: left; justify-content: flex-start; }
  .row .b { justify-content: flex-end; }
  .row .b, .row .pb { text-align: right; }
  .row .pa { text-align: left; }
  .row .pa, .row .pb { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
  .row .bar { margin-top: 6px; }
  .section { padding-block: 48px; }
  .hide-s { display: none; }
  .brand { width: 112px; }
  .tools { gap: 4px 8px; }
  .premium .wide { display: none; }
  .premium .narrow { display: inline; }
  .acct-menu .panel { width: min(300px, calc(100vw - 32px)); }
  .login { font-size: 14.5px; }
  .btn.small { padding: 8px 12px; font-size: 14px; }
  .icon { width: 36px; height: 36px; }
  .nav { gap: 0 16px; font-size: 14.5px; }
  .searchline input { font-size: 19px; }
  .nextfight { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eb eb" "line chance" "more more"; padding: 18px; }
  .bout summary { grid-template-columns: 46px minmax(0, 1fr) 14px; grid-template-areas: "res vs chev" "res when chev"; }
  .bout .res { grid-area: res; align-self: start; margin-top: 2px; }
  .bout .vs { grid-area: vs; }
  .bout .when { grid-area: when; align-items: flex-start; text-align: left; max-width: none; flex-direction: row; flex-wrap: wrap; gap: 0 8px; font-size: 13.5px; }
  .bout summary::after { grid-area: chev; }
  .bout .inside { padding-left: 2px; }
  .under { grid-template-columns: 1fr 1fr; grid-template-areas: "ra rb" "conf conf"; }
  .lede { font-size: 17.5px; }
  .facts { gap: 12px 16px; }
  .facts span { font-size: 13.5px; line-height: 1.35; }
  .fly { grid-template-columns: 4ch minmax(0, 1fr) 84px minmax(0, 1fr) 4ch; gap: 8px; }
}
/* Small phones: the top bar has to hold the logo, Log In, Create Account and search in one row, in languages with longer words too. */
@media (max-width: 480px) {
  .brand { width: 98px; }
  .tools { gap: 2px 6px; min-width: 0; }
  .login, .btn.small { font-size: 13px; }
  .btn.small { padding: 8px 11px; }
  .icon { width: 32px; height: 34px; }
  html:not([lang="en"]) .login { max-width: 74px; padding: 4px 2px; white-space: normal; line-height: 1.15; text-align: right; }
  html:not([lang="en"]) .tools .btn.small { max-width: 104px; padding: 6px 11px; white-space: normal; line-height: 1.15; text-align: center; justify-content: center; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .livebar b.on::before, .waitline.on::before { animation: none; } }

/* Dream Matchup Calculator (matchup.html; dream.js does the work) */
.dream { padding-bottom: 48px; }
.dream-pick { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 12px; max-width: 860px; }
.picker { position: relative; min-width: 0; }
.picker input { width: 100%; }
.picker input::-webkit-search-cancel-button { display: none; }
.picker .hits { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 360px; overflow: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--foam); box-shadow: var(--shadow); }
.picker .hits li[role="option"] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 14px; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.picker .hits li[role="option"]:hover, .picker .hits li[aria-selected="true"] { background: var(--shallows); }
.picker .hits .h b { color: var(--ink); }
.swap { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--foam); color: var(--ink-2); cursor: pointer; }
.swap:hover { color: var(--ink); border-color: var(--ink-3); }
.dream-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 20px 0 26px; }
.dream-card { max-width: 860px; gap: 22px; }
.dream-card .duel .name { font-family: var(--display); font-size: clamp(19px, 2.6vw, 26px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.dream-card .duel .name a { color: inherit; text-decoration: none; }
.dream-card .duel .name a:hover { text-decoration: underline; }
.dream-card .duel .pct { font-size: clamp(46px, 8vw, 72px); margin-top: 6px; }
.dream-card .bar { height: 10px; }
.tape { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tape th, .tape td { padding: 10px 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.tape th { width: 34%; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tape td { width: 33%; color: var(--ink); font-variant-numeric: tabular-nums; }
.tape td:first-child { text-align: left; }
.tape td:last-child { text-align: right; }
.dream-card .note { padding: 10px 14px; border-radius: 12px; background: var(--shallows); font-size: 14.5px; color: var(--ink-2); }
.dream-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.dream-how { max-width: 760px; margin-top: 40px; }
@media (max-width: 640px) {
  .dream-pick { grid-template-columns: minmax(0, 1fr); }
  .swap { justify-self: center; width: 42px; height: 42px; transform: rotate(90deg); }
  .tape th { width: 30%; font-size: 11.5px; letter-spacing: 0.05em; }
  .tape td { width: 35%; font-size: 14.5px; }
}
.dream-opts .btn { min-width: 140px; }
.dream-result { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dream-result .part { padding-block: 26px; }
.dream-home { padding-top: 8px; }
.dream-home .head .muted { display: block; max-width: 62ch; margin-top: 6px; }
@media (max-width: 640px) { .dream-opts .btn { flex: 1 1 100%; } }

/* Phins vs. Kalshi: one card per fight, the two numbers side by side, the tale of the tape folded underneath */
.kx-page { padding-bottom: 40px; }
.kx-top { gap: 12px; padding-bottom: 4px; }
.kx-own { display: flex; gap: 14px; align-items: flex-start; max-width: 720px; margin-top: 10px; padding: 16px 18px; border-radius: 16px;
  background: var(--foam); box-shadow: inset 0 0 0 1px var(--line); }
.kx-own svg { flex: none; width: 26px; height: 26px; color: var(--accent); margin-top: 1px; }
.kx-own b { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.kx-own p { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.kx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 26px; }
.kx-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--shallows); min-width: 0; }
.kx-tiles b { font-family: var(--display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.kx-tiles span { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.kx-tiles a, .kx-tiles small { font-size: 14px; color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kx-tiles small { color: var(--ink-3); }
.kx-stamp { margin-top: 12px; }
.kx-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.kx-bar .legend { display: flex; gap: 18px; font-size: 14px; color: var(--ink-3); }
.kx-bar .legend span { display: inline-flex; align-items: center; gap: 7px; }
.kx-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.kx { padding: 20px 22px 8px; border-radius: 20px; background: var(--foam); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); scroll-margin-top: 90px; }
.kx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kx-head .meta { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.kx-flag { flex: none; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--shallows); color: var(--ink-2); }
.kx-flag.f-split { background: var(--ink); color: var(--sky); }
.kx-flag.f-lean { box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); background: transparent; }
.kx-names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; margin: 14px 0 16px; }
.kx-side { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kx-side.b { align-items: flex-end; text-align: right; }
.kx-name { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--display); font-size: clamp(17px, 2.4vw, 22px); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.15; color: var(--ink-3); }
.kx-side.picked .kx-name { color: var(--ink); }
.kx-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.kx-side.b .kx-tags { justify-content: flex-end; }
.kx-tag { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.kx-tag.pick { background: var(--btn); color: var(--btn-ink); }
.kx-tag.fav { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
.kx-names .vs { font-family: var(--text); font-size: 13px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.kx-names .who { color: inherit; text-decoration: none; }
.kx-open { margin-top: 14px; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.kx-open:hover { background: var(--accent); color: var(--btn-ink); opacity: 1; }
.kx.solo { margin: 18px 0 8px; padding-bottom: 20px; }
.kx-asides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; gap: 12px; margin-top: 10px; }
.kx-asides .kx-own { margin-top: 0; max-width: none; }
.kx-edge svg { color: var(--accent); }
.kx-facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 30px; }
.kx-facts b { font-size: 28px; }
.kx-facts a { font-size: 14px; color: var(--link); }
p.kx-why { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }
.kx-legal { margin-top: 18px; padding-bottom: 24px; }
.kx-names .who:hover { text-decoration: underline; }
.kx-compare { display: grid; grid-template-columns: minmax(0, 1fr) 92px; grid-template-rows: auto auto; column-gap: 20px; row-gap: 10px; align-items: center; }
.kx-row { display: grid; grid-template-columns: 62px 44px minmax(0, 1fr) 44px; align-items: center; gap: 10px; grid-column: 1; }
.kx-who { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.kx-row .pa, .kx-row .pb { font-size: 17px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kx-row .pb { text-align: right; }
.kx-row .won { color: var(--ink); }
.kx-row .bar { height: 8px; }
.kx-row:nth-child(2) .bar { opacity: 0.62; }
.kx-gap { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch;
  border-left: 1px solid var(--line); padding-left: 18px; }
.kx-gap b { font-family: var(--display); font-size: 36px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.kx-gap span { margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.kx-result { margin-top: 12px; }
.kx-more { margin-top: 16px; border-top: 1px solid var(--line); }
.kx-more summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
.kx-more summary::-webkit-details-marker { display: none; }
.kx-more summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; }
.kx-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.kx-more summary:hover span { text-decoration: underline; }
.kx-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 36px; padding-bottom: 16px; }
.kx-col { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.kx-col h4 { margin: 4px 0 0; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.kx-col .muted.small { margin: -6px 0 2px; }
.kx-why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.kx-why li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-2); }
.kx-why li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.kx-why li:first-child { color: var(--ink); font-weight: 600; }
.kx-tape td.up { font-weight: 700; }
.kx-tape td.up::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 2px 7px; border-radius: 50%; background: var(--sea); vertical-align: middle; }
.kx-tape tr td:last-child.up::after { display: none; }
.kx-tape tr td:last-child.up::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 2px 0; border-radius: 50%; background: var(--shell); vertical-align: middle; }
.kx-tape th { font-size: 11.5px; }
.kx-tape th, .kx-tape td { padding-block: 8px; }
.kx-tape tr:first-child th, .kx-tape tr:first-child td { border-top: 0; }
.kx-links { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; padding-top: 28px; }
.kx-links .ext::after { content: " ↗"; }
.kx-empty { margin-top: 26px; padding: 26px; border-radius: 20px; background: var(--foam); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kx-empty h2 { font-size: 22px; }
.kx-empty p { margin: 0; color: var(--ink-2); }
.kx-read { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.kx-read h2 { font-size: 22px; letter-spacing: -0.015em; }
.kx-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
.kx-notes p { margin: 0; font-size: 15px; color: var(--ink-2); }
.kx-notes b { display: block; margin-bottom: 4px; color: var(--ink); }
@media (max-width: 860px) {
  .kx-body { grid-template-columns: minmax(0, 1fr); }
  .kx-asides { grid-template-columns: minmax(0, 1fr); }
  .kx-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .kx { padding: 16px 16px 6px; border-radius: 18px; }
  .kx-names .vs { display: none; }
  .kx-names { gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kx-name { font-size: 15.5px; gap: 7px; }
  .kx-side.a .kx-name { flex-direction: column; align-items: flex-start; }
  .kx-side.b .kx-name { flex-direction: column-reverse; align-items: flex-end; }
  .kx-tag { font-size: 11px; padding: 2px 7px; }
  .kx-compare { grid-template-columns: minmax(0, 1fr) 70px; column-gap: 12px; }
  .kx-row { grid-template-columns: 52px 38px minmax(0, 1fr) 38px; gap: 7px; }
  .kx-row .pa, .kx-row .pb { font-size: 15.5px; }
  .kx-who { font-size: 11.5px; }
  .kx-gap { padding-left: 12px; }
  .kx-gap b { font-size: 28px; }
  .kx-gap span { font-size: 10px; letter-spacing: 0.05em; }
  .kx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kx-facts b { font-size: 24px; }
  .kx-bar .legend { display: none; }
}
.kx-names .vs { align-self: center; }
/* Vs. Market: how it ends, Phins next to Kalshi */
.lines { display: flex; flex-direction: column; }
.ln { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 46px; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; }
.ln.head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ln.head span:last-child { text-align: right; }
.ln .what { color: var(--ink-2); min-width: 0; }
.ln .v { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ln .v i { display: block; height: 8px; min-width: 3px; max-width: calc(100% - 44px); border-radius: 0 4px 4px 0; }
.ln .v i.ph { background: var(--accent); }
.ln .v i.kp { background: var(--ink-3); opacity: 0.55; }
.ln .v b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ln .d { text-align: right; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ln.big .what { color: var(--ink); font-weight: 600; }
.ln.big .d { color: var(--ink); }
.ln.big .d::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 2px 0; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.kx-points { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.kx-points li { position: relative; padding-left: 16px; font-size: 15px; color: var(--ink-2); }
.kx-points li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.kx-points li b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .kx-points { grid-template-columns: minmax(0, 1fr); }
  .ln { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 46px; gap: 8px; font-size: 13.5px; }
  .ln .d { white-space: nowrap; }
}