/*
 * WTR Tidewater components (components.css, handle wtre-components).
 * GENERATED by tools/build-css.mjs from assets/css/src/components/ in the
 * order of _order.txt. Do not edit this file: edit the sources and rebuild.
 * Sources: icons.css, buttons.css, links.css, chips.css, labels.css, status.css, logo-tile.css, photo.css, forms.css, cards.css, match-card.css, rows.css, standings.css, mini-table.css, form-tiles.css, section-head.css, tabs.css, segmented.css, filters.css, breadcrumbs.css, load-more.css, newsletter.css, author-box.css, share.css, comments.css, modal.css, toast.css, states.css, skeleton.css, ads.css, shell-header.css, shell-strip.css, shell-nav.css, shell-mega.css, shell-drawer.css, shell-search.css, shell-footer.css, breaking.css, consent.css, utilities.css
 */
/* icons.css */
.wx-i {
display: inline-block;
flex: none;
vertical-align: middle;
fill: none;
stroke: currentColor;
overflow: visible;
}
.wx-mark { display: block; flex: none; }
.wx-i--pause, .wx-i--play-fill, .wx-i--winner, .wx-i--mark { stroke: none; }
/* buttons.css */
.wx-btn {
--wx-bh: 48px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
flex: none;
box-sizing: border-box;
block-size: var(--wx-bh);
min-inline-size: 0;
margin: 0;
padding: 0 20px;
border: 0;
border-radius: var(--wtr-radius-sm);
background: var(--wtr-btn);
color: var(--wtr-btn-text);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
letter-spacing: 0;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--wtr-dur-1) var(--wtr-ease), border-color var(--wtr-dur-1) var(--wtr-ease), color var(--wtr-dur-1) var(--wtr-ease);
}
.wx-btn:hover { background: var(--wtr-btn-hover); color: var(--wtr-btn-text); text-decoration: none; }
.wx-btn .wx-i { flex: none; }
.wx-btn--secondary {
background: transparent;
border: 1.5px solid var(--wtr-control);
color: var(--wtr-heading);
}
.wx-btn--secondary:hover { background: var(--wtr-tag-bg); color: var(--wtr-heading); }
.wx-btn--cta { background: var(--wtr-cta); color: var(--wtr-cta-text); font-weight: 700; }
.wx-btn--cta:hover { background: var(--wtr-cta-hover); color: var(--wtr-cta-text); }
.wx-btn--text {
--wx-bh: 44px;
gap: 6px;
padding: 0 4px;
background: transparent;
color: var(--wtr-link);
}
.wx-btn--text:hover { background: transparent; color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-btn--danger {
--wx-bh: 44px;
padding: 0 18px;
background: transparent;
border: 1.5px solid var(--wtr-loss);
color: var(--wtr-loss);
}
.wx-btn--danger:hover { background: var(--wtr-section); color: var(--wtr-loss); }
.wx-btn--icon,
.wx-btn--round {
--wx-bh: 44px;
inline-size: 44px;
padding: 0;
background: transparent;
color: var(--wtr-heading);
}
.wx-btn--icon:hover { background: var(--wtr-section); color: var(--wtr-heading); }
.wx-btn--round { border-radius: 50%; border: 1.5px solid var(--wtr-control); }
.wx-btn--round:hover { background: var(--wtr-tag-bg); color: var(--wtr-heading); }
.wx-btn--round[aria-pressed="true"] { background: var(--wtr-btn); border-color: var(--wtr-btn); color: var(--wtr-btn-text); }
.wx-btn--md { --wx-bh: 44px; padding-inline: 16px; }
.wx-btn--sm { --wx-bh: 36px; padding-inline: 14px; font-size: var(--wtr-fs-ui-s); }
.wx-btn--sm::after { content: ""; position: absolute; inset: -6px -1px; }
.wx-btn--block { display: flex; inline-size: 100%; }
@media (max-width: 599px) {
.wx-btn--main { display: flex; inline-size: 100%; }
}
.wx-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.wx-spin {
flex: none;
inline-size: 16px;
block-size: 16px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: wx-spin .8s linear infinite;
}
@keyframes wx-spin { to { transform: rotate(360deg); } }
.wx-btn:disabled,
.wx-btn[aria-disabled="true"] {
background: var(--wtr-border);
color: var(--wtr-meta);
cursor: not-allowed;
}
.wx-btn--secondary:disabled,
.wx-btn--secondary[aria-disabled="true"] { background: transparent; border-color: var(--wtr-border); }
.wx-btn--text:disabled, .wx-btn--icon:disabled, .wx-btn--round:disabled { background: transparent; }
.wx-btn[aria-busy="true"]:disabled { background: var(--wtr-btn); color: var(--wtr-btn-text); }
.wx-btn--secondary[aria-busy="true"]:disabled { background: transparent; border-color: var(--wtr-control); color: var(--wtr-heading); }
.wx-btn--cta[aria-busy="true"]:disabled { background: var(--wtr-cta); color: var(--wtr-cta-text); }
/* links.css */
.wx-link,
.wx-prose a:not([class]) {
color: var(--wtr-link);
text-decoration: underline 1px;
text-decoration-color: currentColor;
text-underline-offset: .18em;
border-radius: 2px;
transition: color var(--wtr-dur-1) var(--wtr-ease), text-decoration-thickness var(--wtr-dur-1) var(--wtr-ease);
}
.wx-link:visited,
.wx-prose a:not([class]):visited { color: var(--wtr-link-visited); }
.wx-link:hover,
.wx-prose a:not([class]):hover { color: var(--wtr-link-hover); text-decoration: underline 2px; text-underline-offset: .18em; }
.wx-link--plain:visited { color: var(--wtr-link); }
.wx-mention {
appearance: none;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--wtr-link);
font: inherit;
text-decoration: underline 2px dotted;
text-underline-offset: .22em;
cursor: pointer;
}
.wx-mention:hover { color: var(--wtr-link-hover); }
.wx-mention-card {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 12px;
max-inline-size: 340px;
padding: 14px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
background: var(--wtr-surface);
box-shadow: var(--wtr-shadow-2);
font-family: var(--wtr-ff-sans);
}
.wx-mention-card-body { display: grid; gap: 3px; min-width: 0; align-content: start; }
.wx-mention-card-name { font-size: 15px; font-weight: 700; color: var(--wtr-heading); }
.wx-mention-card-sub { font-size: var(--wtr-fs-caption); color: var(--wtr-meta); }
.wx-mention-card-stats { font: 500 12.5px/1.3 var(--wtr-ff-mono); font-variant-numeric: tabular-nums; color: var(--wtr-text); }
.wx-mention-card-link { display: inline-flex; align-items: center; justify-self: start; min-block-size: 44px; margin: -8px 0 -12px; font-size: var(--wtr-fs-caption); font-weight: 700; color: var(--wtr-link); }
.wx-mention-card-link:hover { color: var(--wtr-link-hover); }
/* chips.css */
.wx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wx-chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
box-sizing: border-box;
max-inline-size: 200px;
block-size: 36px;
padding: 0 14px;
border-radius: var(--wtr-radius-pill);
font: 600 var(--wtr-fs-ui-s)/1 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
-webkit-tap-highlight-color: transparent;
transition: border-color var(--wtr-dur-1) var(--wtr-ease), box-shadow var(--wtr-dur-1) var(--wtr-ease);
}
.wx-chip::after { content: ""; position: absolute; inset: -6px -1px; }
.wx-chip:has(> .wx-tile) { padding-left: 6px; }
.wx-chip-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wx-chip--comp { background: var(--wtr-tag-bg); color: var(--wtr-tag-text); font-weight: 700; }
.wx-chip--comp:hover { color: var(--wtr-tag-text); box-shadow: inset 0 0 0 1px var(--wtr-control); text-decoration: none; }
.wx-chip--team { background: var(--wtr-surface); border: 1px solid var(--wtr-border); color: var(--wtr-heading); }
.wx-chip--team:has(> .wx-tile) { padding-left: 5px; }
.wx-chip--team:hover { border-color: var(--wtr-control); color: var(--wtr-heading); text-decoration: none; }
.wx-chip--filter {
appearance: none;
gap: 6px;
max-inline-size: none;
block-size: 40px;
margin: 0;
padding: 0 14px;
border: 1.5px solid var(--wtr-control);
background: var(--wtr-surface);
color: var(--wtr-heading);
cursor: pointer;
}
.wx-chip--filter::after { inset: -4px -1.5px; }
.wx-chip--filter:hover { background: var(--wtr-tag-bg); }
.wx-chip--filter .wx-i { display: none; }
.wx-chip--filter[aria-pressed="true"] { background: var(--wtr-btn); border-color: var(--wtr-btn); color: var(--wtr-btn-text); }
.wx-chip--filter[aria-pressed="true"] .wx-i { display: inline-block; }
/* labels.css */
.wx-label {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
box-sizing: border-box;
block-size: 22px;
padding: 0 7px;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-tag-bg);
color: var(--wtr-tag-text);
font: 800 11.5px/1 var(--wtr-ff-sans);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
.wx-label--signal { background: var(--wtr-signal); color: var(--wtr-signal-text); }
.wx-label--live::before {
content: "";
flex: none;
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: currentColor;
animation: wx-pulse 1.6s var(--wtr-ease) infinite;
}
.wx-label--outline { background: transparent; color: var(--wtr-heading); box-shadow: inset 0 0 0 1.5px var(--wtr-heading); }
.wx-label--video { gap: 5px; background: var(--wtr-heading); color: var(--wtr-bg); }
.wx-label--video .wx-i { fill: currentColor; stroke: none; }
.wx-label--plain { background: var(--wtr-section); color: var(--wtr-heading); }
@keyframes wx-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
.wx-label--live::before { animation: none; }
}
/* status.css */
.wx-status { display: inline-flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.wx-chip-status {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
box-sizing: border-box;
block-size: 22px;
padding: 0 7px;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-section);
color: var(--wtr-meta);
font: 800 11.5px/1 var(--wtr-ff-sans);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.wx-chip-status[data-state="live"] { background: var(--wtr-signal); color: var(--wtr-signal-text); }
.wx-chip-status[data-state="live"]::before {
content: "";
flex: none;
inline-size: 6px;
block-size: 6px;
border-radius: 50%;
background: currentColor;
animation: wx-pulse 1.6s var(--wtr-ease) infinite;
}
.wx-chip-status[data-state="ht"] { gap: 5px; background: var(--wtr-ht-bg); color: var(--wtr-ht-text); }
.wx-chip-status[data-state="ht"]::before {
content: "";
flex: none;
inline-size: 9px;
block-size: 9px;
background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}
.wx-chip-status[data-state="pst"],
.wx-chip-status[data-state="canc"],
.wx-chip-status[data-state="abd"],
.wx-chip-status[data-state="int"] { background: transparent; color: var(--wtr-loss); box-shadow: inset 0 0 0 1.5px var(--wtr-loss); }
.wx-chip-status[data-state="pre"] {
block-size: auto;
padding: 0;
background: none;
color: var(--wtr-heading);
font: 500 var(--wtr-fs-time)/var(--wtr-lh-time) var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
text-transform: none;
}
.wx-chip-min {
color: var(--wtr-signal-ink);
font: 600 var(--wtr-fs-time)/1 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
}
.wx-chip-min:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
.wx-chip-status[data-state="live"]::before { animation: none; }
}
/* logo-tile.css */
.wx-tile {
--wx-t: 32px;
--wx-tp: 4px;
--wx-tr: 6px;
--wx-tf: 10px;
position: relative;
display: inline-grid;
place-items: center;
flex: none;
box-sizing: border-box;
inline-size: var(--wx-t);
block-size: var(--wx-t);
padding: var(--wx-tp);
border-radius: var(--wx-tr);
background: var(--wtr-logo-tile);
box-shadow: inset 0 0 0 1px var(--wtr-logo-ring);
overflow: hidden;
vertical-align: middle;
}
.wx-tile img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: scale-down;
object-position: center;
mix-blend-mode: multiply;
}
:root[data-theme="dark"] .wx-tile img { mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .wx-tile img { mix-blend-mode: normal; }
}
.wx-tile-mono {
display: grid;
place-items: center;
gap: calc(var(--wx-t) / 16);
color: var(--wtr-mono-ink);
font: 800 var(--wx-tf)/1 var(--wtr-ff-sans);
letter-spacing: .02em;
white-space: nowrap;
text-transform: uppercase;
}
.wx-tile-mono[hidden] { display: none; }
.wx-tile--48 .wx-tile-mono::after,
.wx-tile--56 .wx-tile-mono::after,
.wx-tile--72 .wx-tile-mono::after,
.wx-tile--96 .wx-tile-mono::after {
content: "";
inline-size: calc(var(--wx-t) / 3);
block-size: max(2px, calc(var(--wx-t) / 32));
border-radius: 2px;
background: var(--wtr-accent);
}
.wx-tile--16 { --wx-t: var(--wtr-logo-16); --wx-tp: var(--wtr-logo-16-pad); --wx-tr: var(--wtr-logo-16-r); --wx-tf: 7px; }
.wx-tile--24 { --wx-t: var(--wtr-logo-24); --wx-tp: var(--wtr-logo-24-pad); --wx-tr: var(--wtr-logo-24-r); --wx-tf: 8px; }
.wx-tile--28 { --wx-t: 28px; --wx-tp: 4px; --wx-tr: 5px; --wx-tf: 8.5px; }
.wx-tile--32 { --wx-t: var(--wtr-logo-32); --wx-tp: var(--wtr-logo-32-pad); --wx-tr: var(--wtr-logo-32-r); --wx-tf: 10px; }
.wx-tile--40 { --wx-t: 40px; --wx-tp: 5px; --wx-tr: 7px; --wx-tf: 12px; }
.wx-tile--48 { --wx-t: var(--wtr-logo-48); --wx-tp: var(--wtr-logo-48-pad); --wx-tr: var(--wtr-logo-48-r); --wx-tf: 15px; }
.wx-tile--56 { --wx-t: 56px; --wx-tp: 7px; --wx-tr: 10px; --wx-tf: 17px; }
.wx-tile--72 { --wx-t: 72px; --wx-tp: 9px; --wx-tr: 12px; --wx-tf: 21px; }
.wx-tile--96 { --wx-t: var(--wtr-logo-96); --wx-tp: var(--wtr-logo-96-pad); --wx-tr: var(--wtr-logo-96-r); --wx-tf: 28px; }
.wx-tile--wide { inline-size: calc(var(--wx-t) * 2); }
.wx-tile--dark { background: var(--wtr-header); box-shadow: none; }
.wx-tile--dark img { mix-blend-mode: normal; }
.wx-tile--dark .wx-tile-mono { color: var(--wtr-header-text); }
/* photo.css */
.wx-photo {
position: relative;
display: inline-block;
flex: none;
inline-size: var(--wx-pw, 48px);
block-size: var(--wx-ph, 48px);
border-radius: var(--wx-pr, 8px);
background: var(--wtr-photo-bg);
vertical-align: middle;
}
.wx-photo > img,
.wx-photo > .wx-photo-sil {
display: block;
inline-size: 100%;
block-size: 100%;
border-radius: inherit;
}
.wx-photo > img { object-fit: cover; object-position: 50% 25%; }
.wx-photo > img, .wx-tile img { color: transparent; font-size: 0; }
.wx-photo-sil { fill: var(--wtr-silhouette); }
.wx-photo--circle { border-radius: 50%; }
.wx-photo--portrait { overflow: hidden; }
.wx-photo-num {
position: absolute;
inset: auto 0 0 0;
block-size: 72px;
display: flex;
align-items: flex-end;
padding: 0 12px 10px;
background: var(--wtr-photo-fade);
color: var(--wtr-header-text);
font: 600 30px/1 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
}
.wx-photo-badge {
position: absolute;
right: -4px;
bottom: -4px;
border-radius: var(--wtr-logo-24-r);
box-shadow: 0 0 0 2px var(--wtr-surface);
}
.wx-avatar {
--wx-av: 40px;
display: inline-grid;
place-items: center;
flex: none;
inline-size: var(--wx-av);
block-size: var(--wx-av);
border-radius: 50%;
font: 800 calc(var(--wx-av) * .25 + 4px)/1 var(--wtr-ff-sans);
letter-spacing: .02em;
}
.wx-avatar--fill-0 { background: var(--wtr-header); color: var(--wtr-header-text); }
.wx-avatar--fill-1 { background: var(--wtr-accent); color: var(--wtr-heading); }
.wx-avatar--fill-2 { background: var(--wtr-tag-bg); color: var(--wtr-header); }
.wx-photo.is-empty .wx-photo-num { background: none; color: var(--wtr-heading); }
/* forms.css */
.wx-field { display: grid; gap: 6px; align-content: start; min-width: 0; font-family: var(--wtr-ff-sans); }
.wx-field-label { color: var(--wtr-heading); font: 600 var(--wtr-fs-ui-s)/var(--wtr-lh-ui-s) var(--wtr-ff-sans); }
.wx-field-label small { color: var(--wtr-meta); font-size: inherit; font-weight: 500; }
.wx-field-help { color: var(--wtr-meta); font-size: var(--wtr-fs-caption); line-height: var(--wtr-lh-caption); }
.wx-field-error {
display: flex;
align-items: center;
gap: 6px;
color: var(--wtr-loss);
font: 600 13.5px/1.4 var(--wtr-ff-sans);
}
.wx-field-error[hidden] { display: none; }
.wx-field-error .wx-i { flex: none; }
.wx-input {
box-sizing: border-box;
inline-size: 100%;
block-size: 48px;
margin: 0;
padding: 0 14px;
border: 1.5px solid var(--wtr-control);
border-radius: var(--wtr-radius-sm);
background: var(--wtr-surface);
color: var(--wtr-heading);
font: 500 16px/1.25 var(--wtr-ff-sans);
transition: border-color var(--wtr-dur-1) var(--wtr-ease);
}
.wx-input::placeholder { color: var(--wtr-meta); opacity: 1; }
.wx-input:focus-visible { outline: 2px solid var(--wtr-focus); outline-offset: 2px; }
.wx-input[aria-invalid="true"] { border: 2px solid var(--wtr-loss); padding-inline: 13.5px; }
.wx-input:disabled,
.wx-input[readonly] {
border: 1.5px dashed var(--wtr-border);
background: var(--wtr-section);
color: var(--wtr-meta);
cursor: not-allowed;
}
.wx-field:has(.wx-input:disabled) .wx-field-label { color: var(--wtr-meta); }
textarea.wx-input { block-size: auto; min-block-size: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.wx-select { position: relative; display: block; min-width: 0; }
.wx-select > select.wx-input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.wx-select::after {
content: "";
position: absolute;
top: 50%;
right: 12px;
inline-size: 20px;
block-size: 20px;
margin-top: -10px;
background: var(--wtr-control);
-webkit-mask: var(--wx-chev) center / 20px no-repeat;
mask: var(--wx-chev) center / 20px no-repeat;
pointer-events: none;
}
:root { --wx-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.wx-select--sm > select.wx-input { block-size: 44px; min-inline-size: 200px; padding-left: 12px; }
.wx-pw { position: relative; display: block; }
.wx-pw > .wx-input { padding-right: 52px; }
.wx-pw-toggle {
position: absolute;
top: 2px;
right: 2px;
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--wtr-radius-sm);
background: none;
color: var(--wtr-meta);
cursor: pointer;
}
.wx-pw-toggle:hover { color: var(--wtr-heading); }
.wx-pw-toggle[aria-pressed="true"] .wx-i--eye,
.wx-pw-toggle:not([aria-pressed="true"]) .wx-i--eye-off { display: none; }
.wx-pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.wx-pw-meter > span { block-size: 4px; border-radius: 2px; background: var(--wtr-border); }
.wx-pw-meter > .is-on { background: var(--wtr-win); }
.wx-check {
display: flex;
align-items: flex-start;
gap: 12px;
min-block-size: 44px;
color: var(--wtr-text);
font: 400 var(--wtr-fs-ui)/1.45 var(--wtr-ff-sans);
cursor: pointer;
}
.wx-check--center { align-items: center; }
.wx-check > input {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
display: grid;
place-items: center;
inline-size: 22px;
block-size: 22px;
margin: 1px 0 0;
border: 1.5px solid var(--wtr-control);
border-radius: 4px;
background: var(--wtr-surface);
cursor: pointer;
}
.wx-check--center > input { margin-top: 0; }
.wx-check > input[type="radio"] { border-radius: 50%; }
.wx-check > input:checked { border-color: var(--wtr-btn); background: var(--wtr-btn); }
.wx-check > input[type="checkbox"]:checked::before {
content: "";
inline-size: 15px;
block-size: 15px;
background: var(--wtr-btn-text);
-webkit-mask: var(--wx-tick) center / 15px no-repeat;
mask: var(--wx-tick) center / 15px no-repeat;
}
.wx-check > input[type="radio"]:checked { border-color: var(--wtr-control); background: var(--wtr-surface); }
.wx-check > input[type="radio"]:checked::before { content: ""; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--wtr-btn); }
.wx-check > input:disabled { border-style: dashed; border-color: var(--wtr-border); background: var(--wtr-section); cursor: not-allowed; }
.wx-check small { color: var(--wtr-meta); font-size: inherit; }
:root { --wx-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }
.wx-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 44px; color: var(--wtr-text); font: 400 var(--wtr-fs-ui)/1.45 var(--wtr-ff-sans); cursor: pointer; }
.wx-switch {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: none;
inline-size: 48px;
block-size: 28px;
margin: 0;
border: 0;
border-radius: var(--wtr-radius-pill);
background: var(--wtr-surface);
box-shadow: inset 0 0 0 1.5px var(--wtr-control);
cursor: pointer;
transition: background-color var(--wtr-dur-2) var(--wtr-ease);
}
.wx-switch::before {
content: "";
position: absolute;
top: 3px;
left: 3px;
inline-size: 22px;
block-size: 22px;
border-radius: 50%;
background: var(--wtr-control);
transition: transform var(--wtr-dur-2) var(--wtr-ease), background-color var(--wtr-dur-2) var(--wtr-ease);
}
.wx-switch:checked { background: var(--wtr-btn); box-shadow: none; }
.wx-switch:checked::before { background: var(--wtr-btn-text); transform: translateX(20px); }
.wx-search-field { position: relative; display: block; }
.wx-search-field > .wx-i { position: absolute; top: 50%; left: 14px; margin-top: -10px; color: var(--wtr-meta); pointer-events: none; }
.wx-search-field > .wx-input { padding-left: 44px; border-radius: var(--wtr-radius-pill); }
.wx-search-field > .wx-input::-webkit-search-decoration { -webkit-appearance: none; }
.wx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px 28px; align-items: start; }
.wx-form-grid > .wx-field--wide { grid-column: 1 / -1; }
/* cards.css */
.wx-card {
position: relative;
display: grid;
gap: 10px;
align-content: start;
min-width: 0;
font-family: var(--wtr-ff-sans);
}
.wx-card-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
border-radius: var(--wtr-radius-img);
background: var(--wtr-section);
}
.wx-card-media > img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
color: transparent;
}
.wx-card-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--wtr-border); }
.wx-card-ph .wx-mark { inline-size: 48px; block-size: auto; }
.wx-card--lead .wx-card-ph .wx-mark, .wx-card--video .wx-card-ph .wx-mark { inline-size: 56px; }
.wx-card--compact .wx-card-ph .wx-mark, .wx-card--readalso .wx-card-ph .wx-mark { inline-size: 37px; }
.wx-card-body { display: grid; gap: 10px; align-content: start; min-width: 0; }
.wx-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.wx-card-kicker { color: var(--wtr-tag-text); font-size: var(--wtr-fs-caption); font-weight: 700; line-height: 1.3; }
.wx-card-eyebrow { color: var(--wtr-tag-text); font: 800 11.5px/1.2 var(--wtr-ff-sans); letter-spacing: .1em; text-transform: uppercase; }
.wx-card-title {
margin: 0;
color: var(--wtr-heading);
font: 700 21px/1.22 var(--wtr-ff-sans);
letter-spacing: 0;
overflow-wrap: break-word;
text-wrap: pretty;
}
.wx-card-title a { color: inherit; text-decoration: none; }
.wx-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--wtr-radius-img); }
.wx-card:hover .wx-card-title a,
.wx-card-title a:hover { color: inherit; text-decoration: underline 2px; text-underline-offset: .14em; }
.wx-card-title a:focus-visible { outline: none; }
.wx-card-title a:focus-visible::after { outline: 2px solid var(--wtr-focus); outline-offset: 2px; }
.wx-card--std .wx-card-title,
.wx-card--compact .wx-card-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
overflow: clip;
}
.wx-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
color: var(--wtr-meta);
font-size: var(--wtr-fs-caption);
line-height: 1.4;
}
.wx-card-cc { display: inline-flex; align-items: center; gap: 4px; }
.wx-card-rel[data-wx-rel] { display: inline-block; min-inline-size: 4.9em; font-variant-numeric: tabular-nums; }
.wx-card-flag { color: var(--wtr-meta); font-weight: 600; }
.wx-card--lead {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: 20px 32px;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid var(--wtr-border);
}
.wx-card--lead .wx-card-media { aspect-ratio: 16 / 9; }
.wx-card--lead .wx-card-body { gap: 12px; align-content: center; }
.wx-card--lead .wx-card-title {
font-size: clamp(28px, 3.2vw, 44px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -.02em;
text-wrap: balance;
}
.wx-card-dek { margin: 0; color: var(--wtr-text); font: 400 19px/1.45 var(--wtr-ff-serif); text-wrap: pretty; }
.wx-card--lead .wx-card-meta { gap: 6px 12px; font-size: 13.5px; }
.wx-card--lead .wx-card-author { color: var(--wtr-text); font-weight: 700; }
@media (max-width: 599px) {
.wx-card--lead .wx-card-media { aspect-ratio: 4 / 3; }
}
.wx-card--lead-col { grid-template-columns: minmax(0, 1fr); gap: 20px 28px; }
@media (min-width: 600px) {
.wx-card--lead-col { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
.wx-card--lead-col .wx-card-media { aspect-ratio: 16 / 9; }
.wx-card--lead-col .wx-card-body { gap: 10px; }
.wx-card--lead-col .wx-card-title { font-size: 26px; line-height: 1.08; letter-spacing: -.015em; }
.wx-card--lead-col .wx-card-dek { font-size: 18px; }
.wx-card--lead-col .wx-card-meta { font-size: var(--wtr-fs-caption); }
@media (min-width: 600px) {
.wx-card--lead-col .wx-card-title { font-size: 32px; }
}
.wx-card--compact {
grid-template-columns: minmax(0, 1fr) 96px;
grid-template-areas: "body media";
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--wtr-border);
}
.wx-card--compact .wx-card-media { grid-area: media; inline-size: 96px; aspect-ratio: 1; }
.wx-card--compact .wx-card-body { grid-area: body; gap: 6px; }
.wx-card--compact .wx-card-kicker { font-size: 12.5px; }
.wx-card--compact .wx-card-title { font-size: 17px; line-height: 1.28; -webkit-line-clamp: 3; }
.wx-card--compact .wx-card-title a::after { border-radius: 0; }
.wx-card--list,
.wx-card--rank {
grid-template-columns: 52px minmax(0, 1fr);
gap: 12px;
padding: 12px 0;
border-top: 1px solid var(--wtr-border);
}
.wx-card--list .wx-card-body, .wx-card--rank .wx-card-body { gap: 4px; }
.wx-card--list .wx-card-title, .wx-card--rank .wx-card-title { font-size: 16px; line-height: 1.3; }
.wx-card--list .wx-card-kicker { font-size: 12.5px; }
.wx-card--list .wx-card-title a::after, .wx-card--rank .wx-card-title a::after { border-radius: 0; }
.wx-card-time {
color: var(--wtr-meta);
font-size: var(--wtr-fs-caption);
font-weight: 600;
line-height: 1.6;
font-variant-numeric: tabular-nums;
white-space: normal;
}
.wx-card--rank { grid-template-columns: 36px minmax(0, 1fr); }
.wx-card--rank:first-child { border-top: 2px solid var(--wtr-heading); }
.wx-card-rank { color: var(--wtr-tag-text); font: 800 28px/1 var(--wtr-ff-sans); font-variant-numeric: tabular-nums; }
.wx-card--video .wx-card-media { aspect-ratio: 16 / 9; }
.wx-card--video .wx-card-title { font-size: 20px; line-height: 1.22; }
.wx-card--video .wx-label { justify-self: start; }
.wx-card--video .wx-card-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-card-play {
position: absolute;
left: 12px;
bottom: 12px;
display: grid;
place-items: center;
inline-size: 56px;
block-size: 56px;
border-radius: 50%;
background: var(--wtr-media-scrim);
color: var(--wtr-on-media);
pointer-events: none;
}
.wx-card-play .wx-i { margin-left: 3px; }
.wx-card-dur {
position: absolute;
right: 10px;
bottom: 10px;
padding: 3px 7px;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-media-scrim);
color: var(--wtr-on-media);
font: 700 12.5px/1.2 var(--wtr-ff-sans);
font-variant-numeric: tabular-nums;
pointer-events: none;
}
.wx-inline { margin: .4em 0 1.6em; }
.wx-inline .wx-card-title { margin: 0; font: 700 17px/1.28 var(--wtr-ff-sans); }
.wx-inline .wx-card-title a { color: var(--wtr-heading); text-decoration: none; }
.wx-inline .wx-card-meta { margin: 0; }
.wx-card--readalso {
grid-template-columns: 96px minmax(0, 1fr);
gap: 14px;
padding: 12px 0;
border-block: 1px solid var(--wtr-border);
font-family: var(--wtr-ff-sans);
}
.wx-card--readalso .wx-card-media { inline-size: 96px; aspect-ratio: 1; }
.wx-card--readalso .wx-card-body { gap: 6px; align-content: center; }
.wx-card--readalso .wx-card-title { font-size: 17px; line-height: 1.28; }
.wx-card--readalso .wx-card-title a::after { border-radius: 0; }
.wx-card--skel { pointer-events: none; }
.wx-card--skel .wx-card-media { background: var(--wtr-skeleton); }
.wx-panel, .wx-cq, .wx-cards--news-front { container: wx-cards / inline-size; }
.wx-panel { display: grid; gap: 12px; min-width: 0; }
.wx-panel-label { margin: 0; color: var(--wtr-meta); font-size: var(--wtr-fs-caption); }
.wx-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.wx-cards--rows, .wx-cards--list, .wx-cards--text, .wx-cards--lead-rows { gap: 0; }
.wx-cards > :is(.wx-card--compact, .wx-card--list, .wx-card--rank):first-child { border-top: 0; padding-top: 2px; }
.wx-cards--lead-rows > .wx-card--std { padding-bottom: 14px; }
.wx-cards--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
@container wx-cards (min-width: 600px) {
.wx-cards--grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wx-cards--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wx-cards--video { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@container wx-cards (min-width: 680px) {
.wx-cards--top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container wx-cards (min-width: 900px) {
.wx-cards--row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.wx-cards--video { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container wx-cards (max-width: 599px) {
.wx-cards--video {
grid-auto-flow: column;
grid-auto-columns: 260px;
grid-template-columns: none;
gap: 20px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
}
.wx-cards--video > .wx-card { scroll-snap-align: start; }
}
@container wx-cards (max-width: 679px) {
.wx-cards--top { gap: 0; }
.wx-cards--top > .wx-card--std {
grid-template-columns: minmax(0, 1fr) 96px;
grid-template-areas: "body media";
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--wtr-border);
}
.wx-cards--top > .wx-card--std .wx-card-media { grid-area: media; inline-size: 96px; aspect-ratio: 1; }
.wx-cards--top > .wx-card--std .wx-card-body { grid-area: body; gap: 6px; }
.wx-cards--top > .wx-card--std .wx-card-kicker { font-size: 12.5px; }
.wx-cards--top > .wx-card--std .wx-card-title { font-size: 17px; line-height: 1.28; -webkit-line-clamp: 3; }
.wx-cards--top > .wx-card--std .wx-card-title a::after { border-radius: 0; }
.wx-cards--top > .wx-card--std :is(.wx-card-author, .wx-label:not(.wx-label--signal)) { display: none; }
.wx-cards--top > .wx-card--std:first-child { border-top: 0; padding-top: 2px; }
}
@container wx-cards (max-width: 599px) {
.wx-cards--row { gap: 0; }
.wx-cards--row > .wx-card--std:first-child { padding-bottom: 14px; }
.wx-cards--row > .wx-card--std:not(:first-child) {
grid-template-columns: minmax(0, 1fr) 96px;
grid-template-areas: "body media";
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--wtr-border);
}
.wx-cards--row > .wx-card--std:not(:first-child) .wx-card-media { grid-area: media; inline-size: 96px; aspect-ratio: 1; }
.wx-cards--row > .wx-card--std:not(:first-child) .wx-card-body { grid-area: body; gap: 6px; }
.wx-cards--row > .wx-card--std:not(:first-child) .wx-card-kicker { font-size: 12.5px; }
.wx-cards--row > .wx-card--std:not(:first-child) .wx-card-title { font-size: 17px; line-height: 1.28; -webkit-line-clamp: 3; }
.wx-cards--row > .wx-card--std:not(:first-child) .wx-card-title a::after { border-radius: 0; }
.wx-cards--row > .wx-card--std:not(:first-child) :is(.wx-card-author, .wx-label:not(.wx-label--signal)) { display: none; }
}
/* match-card.css */
.wx-mcard {
position: relative;
box-sizing: border-box;
display: grid;
grid-template-rows: 22px 72px 51px;
align-content: start;
gap: 12px;
min-width: 0;
block-size: 199px;
padding: 14px 16px;
background: var(--wtr-surface);
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
color: var(--wtr-text);
}
.wx-mcard[data-wx-state="live"] { box-shadow: inset 3px 0 0 var(--wtr-signal); }
.wx-mcard--off { border-style: dashed; border-color: var(--wtr-control); }
.wx-mcard-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.wx-mcard-comp {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
color: var(--wtr-meta);
font: 600 12.5px/1.3 var(--wtr-ff-sans);
}
.wx-mcard-comp .wx-tile { flex: none; }
.wx-mcard-comp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-mcard { container: wx-mcard / inline-size; }
.wx-mcard-comp-s { display: none; }
@container wx-mcard (max-width: 305px) {
.wx-mcard-comp--1 > .wx-mcard-comp-l { display: none; }
.wx-mcard-comp--1 > .wx-mcard-comp-s { display: block; }
}
@container wx-mcard (max-width: 325px) {
.wx-mcard-comp--2 > .wx-mcard-comp-l { display: none; }
.wx-mcard-comp--2 > .wx-mcard-comp-s { display: block; }
}
@container wx-mcard (max-width: 355px) {
.wx-mcard-comp--3 > .wx-mcard-comp-l { display: none; }
.wx-mcard-comp--3 > .wx-mcard-comp-s { display: block; }
}
@container wx-mcard (max-width: 405px) {
.wx-mcard-comp--4 > .wx-mcard-comp-l { display: none; }
.wx-mcard-comp--4 > .wx-mcard-comp-s { display: block; }
}
.wx-mcard .wx-chip-status[data-state="pre"] { font-size: 13px; }
.wx-mcard-teams { display: grid; grid-template-rows: 32px 32px; gap: 8px; min-width: 0; }
.wx-mcard-team {
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto auto;
align-items: center;
column-gap: 10px;
min-width: 0;
}
.wx-mcard-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wx-mcard-name {
min-width: 0;
overflow: hidden;
color: var(--wtr-heading);
font: 700 16px/1.3 var(--wtr-ff-sans);
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-mcard-sc {
min-inline-size: 2ch;
color: var(--wtr-heading);
font: 500 20px/1 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
text-align: right;
}
.wx-mcard-sc:empty { min-inline-size: 0; }
.wx-mcard-win { display: inline-flex; inline-size: 8px; color: var(--wtr-heading); visibility: hidden; }
.wx-mcard-win .wx-i { inline-size: 8px; block-size: 10px; fill: currentColor; }
.wx-mcard[data-wx-state="pre"] .wx-mcard-win,
.wx-mcard:is([data-wx-state="pst"], [data-wx-state="canc"], [data-wx-state="tbc"]) .wx-mcard-win { display: none; }
.wx-mcard:not([data-wx-state="pre"]) .wx-mcard-name { font-weight: 600; }
.wx-mcard:is([data-wx-state="live"], [data-wx-state="ht"], [data-wx-state="int"], [data-wx-state="abd"], [data-wx-state="ft"]) [data-wx-lead] .wx-mcard-name { font-weight: 800; }
.wx-mcard [data-wx-lead] .wx-mcard-sc { font-weight: 600; }
.wx-mcard[data-wx-state="ft"] [data-wx-lead] .wx-mcard-win { visibility: visible; }
.wx-mcard[data-wx-state="ft"]:has([data-wx-lead]) .wx-mcard-team:not([data-wx-lead]) :is(.wx-mcard-name, .wx-mcard-sc) { color: var(--wtr-meta); font-weight: 500; }
.wx-badge {
flex: none;
padding: 1px 5px;
border-radius: var(--wtr-radius-xs);
box-shadow: inset 0 0 0 1px var(--wtr-control);
color: var(--wtr-text);
font: 700 10.5px/1.3 var(--wtr-ff-sans);
letter-spacing: .02em;
}
.wx-mcard-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
padding-top: 10px;
border-top: 1px solid var(--wtr-border);
}
.wx-mcard-venue {
min-width: 0;
overflow: hidden;
color: var(--wtr-meta);
font: 400 13px/1.3 var(--wtr-ff-sans);
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-mcard-was { font: 500 13px/1.3 var(--wtr-ff-mono); font-variant-numeric: tabular-nums; }
.wx-mcard-act { display: flex; flex: none; align-items: center; gap: 2px; }
.wx-mcard[data-wx-state="pre"] .wx-mcard-act--on,
.wx-mcard:not([data-wx-state="pre"]) .wx-mcard-act--pre { display: none; }
.wx-mcard-link {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 0;
color: var(--wtr-link);
font: 700 13.5px/18px var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
}
.wx-mcard-link::after { content: ""; position: absolute; inset: -3px 0; }
.wx-mcard-link:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-mcard-link .wx-i { flex: none; }
.wx-mcard-pred { margin-left: 8px; }
.wx-mcard .wx-mcard-cal { --wx-bh: 40px; inline-size: 40px; position: relative; }
.wx-mcard .wx-mcard-cal::after { content: ""; position: absolute; inset: -2px; }
.wx-mcard-sk-comp { --wx-sw: 110px; --wx-sh: 16px; flex: none; }
.wx-mcard-sk-time { --wx-sw: 70px; --wx-sh: 16px; flex: none; }
.wx-mcard--loading .wx-mcard-team { grid-template-columns: 32px minmax(0, 1fr); }
.wx-mcard-sk-name { --wx-sw: 60%; --wx-sh: 16px; }
.wx-mcard-sk-name--2 { --wx-sw: 45%; }
.wx-mcard-sk-foot { --wx-sw: 50%; --wx-sh: 14px; }
.wx-mcard--error {
grid-template-rows: none;
align-content: center;
justify-items: start;
gap: 10px;
padding: 20px 16px;
}
.wx-mcard--error > .wx-i { inline-size: 22px; block-size: 22px; color: var(--wtr-loss); }
.wx-mcard-err-t { margin: 0; color: var(--wtr-heading); font: 700 15px/1.3 var(--wtr-ff-sans); }
.wx-mcard-err-x { margin: 0; color: var(--wtr-meta); font: 400 13.5px/1.45 var(--wtr-ff-sans); }
.wx-mcard-retry.wx-btn { --wx-bh: 40px; padding-inline: 14px; font-size: 14px; font-weight: 600; }
.wx-mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
/* rows.css */
.wx-mrow {
box-sizing: border-box;
display: grid;
grid-template-columns: 72px minmax(0, 1fr) 24px;
align-items: center;
column-gap: 12px;
min-block-size: 64px;
padding: 8px 0;
border-bottom: 1px solid var(--wtr-border);
color: var(--wtr-text);
text-decoration: none;
}
.wx-mrow:hover { color: var(--wtr-text); text-decoration: none; }
.wx-mrow:hover .wx-mrow-name { text-decoration: underline; text-underline-offset: .14em; }
.wx-mrow:focus-visible { outline-offset: -2px; }
.wx-mrow-when { display: grid; justify-items: start; align-content: center; gap: 2px; min-width: 0; }
.wx-mrow-pre, .wx-mrow-on { display: grid; gap: 2px; }
.wx-mrow-ko { color: var(--wtr-heading); font: 500 14px/1.3 var(--wtr-ff-mono); font-variant-numeric: tabular-nums; }
.wx-mrow-day { color: var(--wtr-meta); font: 400 12px/1.3 var(--wtr-ff-sans); white-space: nowrap; }
.wx-mrow-meta {
display: -webkit-box;
max-inline-size: 100%;
overflow: hidden;
color: var(--wtr-meta);
font: 600 12px/1.3 var(--wtr-ff-sans);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow-wrap: anywhere;
}
.wx-mrow .wx-status { flex-direction: column; align-items: flex-start; gap: 2px; max-inline-size: 100%; }
.wx-mrow .wx-chip-status { max-inline-size: 72px; overflow: hidden; text-overflow: ellipsis; }
.wx-mrow[data-wx-state="pre"] .wx-status,
.wx-mrow:not([data-wx-state="pre"]) .wx-mrow-pre { display: none; }
.wx-mrow-teams { display: grid; gap: 6px; min-width: 0; }
.wx-mrow-team {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: center;
column-gap: 8px;
min-width: 0;
block-size: 24px;
}
.wx-mrow-name {
min-width: 0;
overflow: hidden;
color: var(--wtr-heading);
font: 600 15px/1.3 var(--wtr-ff-sans);
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-mrow-sc { color: var(--wtr-heading); font: 600 16px/1 var(--wtr-ff-mono); font-variant-numeric: tabular-nums; text-align: right; }
.wx-mrow:is([data-wx-state="live"], [data-wx-state="ht"], [data-wx-state="int"], [data-wx-state="abd"], [data-wx-state="ft"]) [data-wx-lead] .wx-mrow-name { font-weight: 800; }
.wx-mrow[data-wx-state="ft"]:has([data-wx-lead]) .wx-mrow-team:not([data-wx-lead]) :is(.wx-mrow-name, .wx-mrow-sc) { color: var(--wtr-meta); }
.wx-mrow-chev { display: flex; justify-content: flex-end; color: var(--wtr-meta); }
.wx-mrow-chev .wx-i { inline-size: 20px; block-size: 20px; }
/* standings.css */
.wx-st { display: grid; gap: 16px; min-width: 0; container: wx-st / inline-size; }
.wx-st-seg { justify-self: start; }
.wx-st-gh { margin: 8px 0 0; color: var(--wtr-heading); font: 700 17px/1.3 var(--wtr-ff-sans); }
.wx-st-box {
min-width: 0;
overflow: hidden;
background: var(--wtr-surface);
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
}
.wx-st--plain .wx-st-box { background: transparent; border: 0; border-radius: 0; }
.wx-st-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.wx-st-scroll:focus-visible { outline-offset: -2px; }
.wx-st-table {
inline-size: max-content;
min-inline-size: 100%;
border-collapse: separate;
border-spacing: 0;
color: var(--wtr-heading);
font: 400 14px/1.2 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
}
.wx-st-table :is(th, td) {
box-sizing: border-box;
padding: 0 8px;
border-bottom: 1px solid var(--wtr-border);
background: var(--wx-st-bg, var(--wtr-surface));
text-align: right;
vertical-align: middle;
white-space: nowrap;
}
.wx-st--plain .wx-st-table { --wx-st-bg: var(--wtr-bg); }
.wx-st-table tbody tr:last-child > * { border-bottom: 0; }
.wx-st--plain .wx-st-table tbody tr:last-child > * { border-bottom: 1px solid var(--wtr-border); }
.wx-st-table thead th {
block-size: 42px;
border-bottom-color: var(--wtr-heading);
color: var(--wtr-meta);
font: 700 11.5px/1.2 var(--wtr-ff-sans);
letter-spacing: .06em;
text-transform: uppercase;
}
.wx-st-table thead .wx-st-c-pts { text-transform: none; }
.wx-st-table abbr { border: 0; text-decoration: none; cursor: help; }
.wx-st-table tbody :is(th, td) { block-size: 48px; }
@container wx-st (min-width: 600px) { .wx-st-table tbody :is(th, td) { block-size: 52px; } }
.wx-st-n { min-inline-size: 46px; }
@container wx-st (min-width: 1024px) { .wx-st-n { inline-size: 58px; min-inline-size: 58px; } }
.wx-st-table td.wx-st-c-pts { font-weight: 700; }
.wx-st-table .wx-st-team {
position: sticky;
left: 0;
z-index: 1;
inline-size: 176px;
min-inline-size: 176px;
max-inline-size: 176px;
padding: 0 10px 0 12px;
box-shadow: 1px 0 0 var(--wtr-border);
text-align: left;
}
@container wx-st (min-width: 600px) { .wx-st-table .wx-st-team { inline-size: 240px; min-inline-size: 240px; max-inline-size: 240px; } }
@container wx-st (min-width: 1024px) { .wx-st-table .wx-st-team { inline-size: auto; min-inline-size: 280px; max-inline-size: none; } }
.wx-st-table thead .wx-st-team { z-index: 2; padding-left: 46px; }
.wx-table-scroll.is-scrolled .wx-st-team { box-shadow: 1px 0 0 var(--wtr-border), 8px 0 10px -8px var(--wtr-scrim); }
.wx-st-edge { position: absolute; top: 0; bottom: 0; left: 0; inline-size: 4px; }
.wx-st-tc { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wx-st-pos {
flex: none;
inline-size: 26px;
color: var(--wtr-meta);
font: 500 13px/1 var(--wtr-ff-mono);
text-align: right;
}
.wx-st-tc .wx-tile { flex: none; }
.wx-st-name { display: grid; min-width: 0; }
.wx-st-link {
min-width: 0;
overflow: hidden;
color: var(--wtr-heading);
font: 600 15px/1.3 var(--wtr-ff-sans);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
a.wx-st-link::after { content: ""; position: absolute; inset: 0; }
a.wx-st-link:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .14em; }
.wx-st-nm-short { display: none; }
@container wx-st (max-width: 599px) {
.wx-st-nm-short { display: inline; }
.wx-st-nm-full { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.wx-st-you {
color: var(--wtr-tag-text);
font: 800 10.5px/1.3 var(--wtr-ff-sans);
letter-spacing: .08em;
text-transform: uppercase;
}
.wx-st-you[hidden] { display: none; }
.wx-st-table tr:is(.wx-st-row--hl, [data-wx-fav]) { --wx-st-bg: var(--wtr-tag-bg); }
.wx-st-table tr:is(.wx-st-row--hl, [data-wx-fav]) .wx-st-link { font-weight: 800; }
.wx-st-table .wx-st-c-form { inline-size: 132px; min-inline-size: 132px; padding: 0 10px 0 12px; text-align: left; }
.wx-st-table thead .wx-st-c-form { padding: 0 8px 0 12px; }
.wx-st-c-form .wx-form { display: flex; }
.wx-st--compact :is(.wx-st-c-w, .wx-st-c-d, .wx-st-c-l, .wx-st-c-pf, .wx-st-c-pa, .wx-st-c-form),
[data-wx-view="compact"] .wx-st :is(.wx-st-c-w, .wx-st-c-d, .wx-st-c-l, .wx-st-c-pf, .wx-st-c-pa, .wx-st-c-form),
.wx-st[data-wx-view="compact"] :is(.wx-st-c-w, .wx-st-c-d, .wx-st-c-l, .wx-st-c-pf, .wx-st-c-pa, .wx-st-c-form) { display: none; }
.wx-st--compact .wx-st-table tbody :is(th, td) { block-size: 46px; }
.wx-st--compact .wx-st-table td:is(.wx-st-c-p, .wx-st-c-pd) { font-size: 13.5px; }
.wx-st-edge--solid-win { background: var(--wtr-win); }
.wx-st-edge--dashed-win { background: repeating-linear-gradient(180deg, var(--wtr-win) 0 3px, transparent 3px 6px); }
.wx-st-edge--dashed-loss { background: repeating-linear-gradient(180deg, var(--wtr-loss) 0 3px, transparent 3px 6px); }
.wx-st-edge--solid-loss { background: var(--wtr-loss); }
.wx-st-legend {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 0;
padding: 0;
list-style: none;
color: var(--wtr-text);
font: 400 13.5px/1.4 var(--wtr-ff-sans);
}
.wx-st-legend li { display: inline-flex; align-items: center; gap: 8px; }
.wx-st-sw { flex: none; inline-size: 4px; block-size: 20px; }
.wx-st-legend-x { color: var(--wtr-meta); font-family: var(--wtr-ff-mono); }
/* mini-table.css */
.wx-mt { display: grid; min-width: 0; }
.wx-mt-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--wtr-heading);
}
.wx-mt-title { margin: 0; color: var(--wtr-heading); font: 700 17px/1.3 var(--wtr-ff-sans); letter-spacing: 0; }
.wx-mt-more {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--wtr-link);
font: 700 13.5px/1.3 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-mt-more::after { content: ""; position: absolute; inset: -14px 0; }
.wx-mt-more:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-mt-foot { display: flex; justify-content: flex-end; margin: 0; padding-top: 12px; }
.wx-mt-table {
inline-size: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
color: var(--wtr-heading);
font: 400 13px/1.2 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
}
.wx-mt-table thead th { position: relative; block-size: 0; padding-block: 0; border: 0; }
.wx-mt-table :is(th, td) { box-sizing: border-box; padding: 0; }
.wx-mt-table tbody :is(th, td) {
block-size: 40px;
border-bottom: 1px solid var(--wtr-border);
background: var(--wx-mt-bg, transparent);
vertical-align: middle;
white-space: nowrap;
}
.wx-mt-table .wx-mt-pos { inline-size: 32px; padding-right: 10px; color: var(--wtr-meta); font-weight: 500; text-align: right; }
.wx-mt-table .wx-mt-team { padding-right: 10px; text-align: left; font-weight: 400; }
.wx-mt-table .wx-mt-pd { inline-size: 50px; padding-right: 10px; color: var(--wtr-text); text-align: right; }
.wx-mt-table .wx-mt-pts { inline-size: 32px; font: 600 13.5px/1.2 var(--wtr-ff-mono); text-align: right; }
.wx-mt-tc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wx-mt-tc .wx-tile { flex: none; }
.wx-mt-name {
min-width: 0;
overflow: hidden;
color: var(--wtr-heading);
font: 600 14px/1.3 var(--wtr-ff-sans);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.wx-mt-table tbody .wx-mt-team { position: relative; }
a.wx-mt-name::after { content: ""; position: absolute; inset: -3px 0; }
a.wx-mt-name:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .14em; }
.wx-mt-table tr:is(.wx-mt-row--hl, [data-wx-fav]) { --wx-mt-bg: var(--wtr-tag-bg); }
.wx-mt-table tr:is(.wx-mt-row--hl, [data-wx-fav]) .wx-mt-name { font-weight: 800; }
.wx-mt-table .wx-mt-gap td { block-size: 24px; color: var(--wtr-meta); font: 600 13px/1 var(--wtr-ff-sans); text-align: center; }
/* form-tiles.css */
.wx-form { display: inline-flex; gap: 3px; flex: none; vertical-align: middle; }
.wx-form-t {
display: inline-grid;
place-items: center;
inline-size: var(--wx-ft, 20px);
block-size: var(--wx-ft, 20px);
border-radius: var(--wtr-radius-xs);
background: var(--wtr-section);
color: var(--wtr-meta);
font: 600 calc(var(--wx-ft, 20px) * .55)/1 var(--wtr-ff-mono);
}
.wx-form-t--w { background: var(--wtr-win); color: var(--wtr-on-status); }
.wx-form-t--l { background: var(--wtr-loss); color: var(--wtr-on-status); }
.wx-form-t--d { background: transparent; color: var(--wtr-draw); box-shadow: inset 0 0 0 1.5px var(--wtr-draw); }
/* section-head.css */
.wx-section-head,
.wx-panel-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 8px;
min-width: 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--wtr-heading);
}
.wx-section-title,
.wx-panel-title {
margin: 0;
color: var(--wtr-heading);
font: 800 20px/1.2 var(--wtr-ff-sans);
letter-spacing: 0;
}
.wx-section-title a,
.wx-panel-title a { position: relative; color: inherit; text-decoration: none; }
.wx-section-title a::after,
.wx-panel-title a::after { content: ""; position: absolute; inset: -1px 0 -18px; }
.wx-section-title a:hover,
.wx-panel-title a:hover { color: inherit; text-decoration: underline 2px; text-underline-offset: .14em; }
.wx-section-sub { flex-basis: 100%; margin: 0; color: var(--wtr-meta); font-size: var(--wtr-fs-caption); }
.wx-section-more,
.wx-panel-more {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 0;
color: var(--wtr-link);
font: 700 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
}
.wx-section-more::after,
.wx-panel-more::after { content: ""; position: absolute; inset: 0 -4px -12px; }
.wx-section-more:hover,
.wx-panel-more:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
/* tabs.css */
.wx-tabs {
position: relative;
display: flex;
gap: 4px;
min-width: 0;
margin: 0;
padding: 0 12px;
border-bottom: 1px solid var(--wtr-border);
background: var(--wtr-surface);
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
list-style: none;
}
.wx-tabs::-webkit-scrollbar { display: none; }
.wx-tabs--bare { padding: 0; background: transparent; }
.wx-tab {
position: relative;
display: inline-flex;
align-items: center;
flex: none;
box-sizing: border-box;
block-size: 48px;
margin: 0;
padding: 0 12px;
border: 0;
background: none;
color: var(--wtr-meta);
font: 600 var(--wtr-fs-ui)/1 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: inset 0 -3px 0 transparent;
transition: color var(--wtr-dur-2) var(--wtr-ease), box-shadow var(--wtr-dur-2) var(--wtr-ease);
}
.wx-tab:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-tab[aria-selected="true"],
.wx-tab[aria-current="page"] {
color: var(--wtr-heading);
font-weight: 700;
box-shadow: inset 0 -3px 0 var(--wtr-indicator);
}
.wx-tab:focus-visible { outline-offset: -2px; }
@media (max-width: 599px) {
.wx-tabs-wrap { position: relative; }
.wx-tabs-wrap::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 1px;
inline-size: 24px;
background: linear-gradient(90deg, transparent, var(--wtr-surface));
pointer-events: none;
}
}
.wx-tabpanel { padding: 20px; }
.wx-tabpanel[hidden]:not([hidden="until-found"]) { display: none; }
.wx-tabpanel[hidden="until-found"] { padding: 0; }
/* segmented.css */
.wx-seg {
display: inline-flex;
flex: none;
gap: 0;
padding: 3px;
border-radius: var(--wtr-radius-pill);
background: var(--wtr-section);
vertical-align: middle;
}
.wx-seg > button {
position: relative;
appearance: none;
block-size: 38px;
margin: 0;
padding: 0 16px;
border: 0;
border-radius: var(--wtr-radius-pill);
background: transparent;
color: var(--wtr-meta);
font: 600 var(--wtr-fs-ui-s)/1 var(--wtr-ff-sans);
white-space: nowrap;
cursor: pointer;
transition: background-color var(--wtr-dur-2) var(--wtr-ease), color var(--wtr-dur-2) var(--wtr-ease), box-shadow var(--wtr-dur-2) var(--wtr-ease);
}
.wx-seg > button::after { content: ""; position: absolute; inset: -6px 0; }
.wx-seg > button:hover { color: var(--wtr-heading); }
.wx-seg > button[aria-pressed="true"] {
background: var(--wtr-surface);
color: var(--wtr-heading);
box-shadow: var(--wtr-shadow-1), inset 0 0 0 1px var(--wtr-border);
}
.wx-seg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wx-seg-label { color: var(--wtr-meta); font: 600 var(--wtr-fs-caption)/1.3 var(--wtr-ff-sans); }
/* filters.css */
.wx-filters {
display: grid;
gap: 14px;
padding: 20px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
}
.wx-filters--bare { padding: 0; border: 0; }
.wx-filters-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.wx-filters .wx-field-label { font-size: var(--wtr-fs-caption); }
.wx-stepper {
display: inline-flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
block-size: 44px;
padding: 0 2px;
border: 1.5px solid var(--wtr-control);
border-radius: var(--wtr-radius-sm);
background: var(--wtr-surface);
}
.wx-stepper > button,
.wx-stepper > a {
display: grid;
place-items: center;
inline-size: 40px;
block-size: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--wtr-radius-sm);
background: none;
color: var(--wtr-heading);
cursor: pointer;
}
.wx-stepper > :is(button, a) { position: relative; }
.wx-stepper > :is(button, a)::after { content: ""; position: absolute; inset: -2px; }
.wx-stepper > :is(button, a):hover { background: var(--wtr-section); color: var(--wtr-heading); }
.wx-stepper > :is(button:disabled, a[aria-disabled="true"]) { color: var(--wtr-border); background: none; cursor: not-allowed; }
.wx-stepper-label { min-inline-size: 84px; color: var(--wtr-heading); font: 700 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans); text-align: center; }
.wx-filters-sum { padding-bottom: 12px; color: var(--wtr-meta); font-size: 13.5px; line-height: 1.4; }
.wx-filters-clear {
appearance: none;
block-size: 44px;
margin: 0;
padding: 0 4px;
border: 0;
background: none;
color: var(--wtr-link);
font: 600 var(--wtr-fs-ui-s)/1 var(--wtr-ff-sans);
text-decoration: underline;
text-underline-offset: .18em;
cursor: pointer;
}
.wx-filters-clear:hover { color: var(--wtr-link-hover); }
/* breadcrumbs.css */
.wx-crumbs { min-width: 0; max-width: 100%; font: 500 var(--wtr-fs-caption)/var(--wtr-lh-caption) var(--wtr-ff-sans); }
.wx-crumbs-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2px 6px;
margin: 0;
padding: 0;
list-style: none;
}
.wx-crumbs-item { min-width: 0; }
.wx-crumbs-item:not([aria-current]), .wx-crumbs-sep, .wx-crumbs-more { flex: none; }
.wx-crumbs-item a,
.wx-crumbs-more a {
position: relative;
color: var(--wtr-meta);
text-decoration: none;
}
.wx-crumbs-item a::after,
.wx-crumbs-more a::after { content: ""; position: absolute; inset: -14px -5px; min-inline-size: 44px; }
.wx-crumbs-more { margin-inline-end: 2px; }
.wx-crumbs-more a::after { left: -16px; right: auto; inline-size: 44px; min-inline-size: 0; }
.wx-crumbs-more + .wx-crumbs-sep + .wx-crumbs-item a::after { left: 0; }
body.wx .wx-crumbs a:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .18em; }
.wx-crumbs-sep { color: var(--wtr-control); }
.wx-crumbs [aria-current="page"] { color: var(--wtr-heading); font-weight: 600; }
.wx-crumbs-more { display: none; }
@media (max-width: 599px) {
.wx-crumbs-list { flex-wrap: nowrap; max-inline-size: 100%; }
.wx-crumbs-far { display: none; }
.wx-crumbs-more { display: list-item; list-style: none; }
.wx-crumbs-item { white-space: nowrap; }
.wx-crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.wx-crumbs [aria-current="page"] span { display: block; overflow: hidden; text-overflow: ellipsis; }
}
/* load-more.css */
.wx-loadmore { display: grid; gap: 8px; padding-top: 16px; }
.wx-loadmore.pagination { margin: 0; border-top: 0; padding-top: 16px; }
.wx-loadmore > .wx-btn { padding: 0 20px; border: 1.5px solid var(--wtr-control); color: var(--wtr-heading); font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans); }
.wx-loadmore > a.wx-btn:hover { border-color: var(--wtr-control); background: var(--wtr-tag-bg); color: var(--wtr-heading); }
.wx-loadmore-error,
.wx-loadmore-end { display: none; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 48px; margin: 0; padding: 0 4px; }
.wx-loadmore[data-state="error"] > .wx-btn,
.wx-loadmore[data-state="end"] > .wx-btn { display: none; }
.wx-loadmore[data-state="error"] .wx-loadmore-error,
.wx-loadmore[data-state="end"] .wx-loadmore-end { display: flex; }
.wx-loadmore-error-t { display: flex; align-items: center; gap: 8px; color: var(--wtr-heading); font-size: var(--wtr-fs-ui-s); line-height: 1.4; }
.wx-loadmore-error-t .wx-i { color: var(--wtr-loss); }
.wx-loadmore-error .wx-btn--text { font-size: var(--wtr-fs-ui-s); font-weight: 700; }
.wx-loadmore-end { color: var(--wtr-meta); font-size: var(--wtr-fs-ui-s); line-height: 1.45; }
.wx-loadmore[data-state="loading"] > .wx-btn { pointer-events: none; cursor: progress; }
[data-wx-new] { animation: wx-in var(--wtr-dur-3) var(--wtr-ease) both; }
@keyframes wx-in { from { opacity: 0; transform: translateY(6px); } }
/* newsletter.css */
.wx-newsletter {
box-sizing: border-box;
border-radius: var(--wtr-radius-md);
background: var(--wtr-header);
color: var(--wtr-header-text);
font-family: var(--wtr-ff-sans);
}
.wx-nl-form { display: grid; gap: 14px; margin: 0; padding: 24px; }
.wx-nl-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--wtr-header-meta); font: 800 var(--wtr-fs-overline)/1.2 var(--wtr-ff-sans); letter-spacing: .1em; text-transform: uppercase; }
.wx-nl-eyebrow .wx-mark { inline-size: 37px; block-size: auto; }
.wx-nl-title { margin: 0; color: var(--wtr-header-text); font: 800 24px/1.15 var(--wtr-ff-sans); letter-spacing: -.01em; }
.wx-nl-fields { display: grid; gap: 8px; }
.wx-nl-label { color: var(--wtr-header-meta); font: 600 var(--wtr-fs-caption)/1.3 var(--wtr-ff-sans); }
.wx-nl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-newsletter .wtr-nl-email {
flex: 1 1 200px;
box-sizing: border-box;
min-inline-size: 0;
block-size: 48px;
margin: 0;
padding: 0 14px;
border: 2px solid transparent;
border-radius: var(--wtr-radius-sm);
background: var(--wtr-input-on-brand-bg);
color: var(--wtr-input-on-brand-text);
font: 500 16px/1.25 var(--wtr-ff-sans);
}
.wx-newsletter .wtr-nl-email::placeholder { color: var(--wtr-petrol-600); opacity: 1; }
.wx-newsletter .wtr-nl-email:focus-visible { outline: 2px solid var(--wtr-accent); outline-offset: 2px; }
.wx-newsletter .wtr-nl-email[aria-invalid="true"] { border-color: var(--wtr-error-line-on-brand); }
.wx-newsletter .wtr-nl-hp { position: absolute; left: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.wx-newsletter .wtr-nl-status {
display: flex;
align-items: flex-start;
gap: 6px;
min-height: 0;
margin: 0;
color: var(--wtr-header-text);
font: 500 var(--wtr-fs-ui-s)/1.45 var(--wtr-ff-sans);
}
.wx-newsletter .wtr-nl-status:empty { display: none; }
.wx-newsletter[data-state="error"] .wtr-nl-status { color: var(--wtr-error-on-brand); font-size: 13.5px; font-weight: 600; }
.wx-newsletter[data-state="error"] .wtr-nl-status::before,
.wx-newsletter[data-state="done"] .wtr-nl-status::before {
content: "";
flex: none;
inline-size: 16px;
block-size: 16px;
margin-top: 2px;
background: currentColor;
-webkit-mask: var(--wx-alert) center / 16px no-repeat;
mask: var(--wx-alert) center / 16px no-repeat;
}
.wx-newsletter[data-state="done"] :is(.wx-nl-label, .wx-nl-row) { display: none; }
.wx-newsletter[data-state="done"] .wtr-nl-status {
gap: 10px;
padding: 14px;
border-radius: 8px;
background: var(--wtr-onband-note);
font-size: var(--wtr-fs-ui);
}
.wx-newsletter[data-state="done"] .wtr-nl-status::before {
inline-size: 20px;
block-size: 20px;
margin-top: 1px;
background: var(--wtr-accent);
-webkit-mask: var(--wx-tick) center / 20px no-repeat;
mask: var(--wx-tick) center / 20px no-repeat;
}
.wx-nl-fine { margin: 0; color: var(--wtr-header-meta); font-size: 12.5px; line-height: 1.5; }
.wx-nl-fine a { color: var(--wtr-header-text); text-decoration: underline; text-underline-offset: .18em; }
.wx-nl-fine a:hover { color: var(--wtr-header-text); text-decoration-thickness: 2px; }
:root { --wx-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20Z'/%3E%3Cpath d='M12 10v4M12 17v.01'/%3E%3C/svg%3E"); }
/* author-box.css */
.wx-author {
display: grid;
grid-template-columns: 72px minmax(0, 1fr);
gap: 16px;
padding: 20px 0;
border-top: 2px solid var(--wtr-heading);
border-bottom: 1px solid var(--wtr-border);
font-family: var(--wtr-ff-sans);
}
.wx-author + .wx-author { border-top-width: 1px; border-top-color: var(--wtr-border); }
.wx-author-photo {
display: block;
inline-size: 72px;
block-size: 72px;
overflow: hidden;
border-radius: 50%;
background: var(--wtr-section);
}
.wx-author-photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; color: transparent; }
.wx-author-photo .wx-avatar { inline-size: 72px; block-size: 72px; font-size: 22px; }
.wx-author-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.wx-author-eyebrow { color: var(--wtr-meta); font: 700 var(--wtr-fs-overline)/1.2 var(--wtr-ff-sans); letter-spacing: .08em; text-transform: uppercase; }
.wx-author-name { justify-self: start; margin: -11px 0; padding: 11px 0; color: var(--wtr-heading); font: 800 19px/1.25 var(--wtr-ff-sans); text-decoration: none; }
.wx-author-name:hover { color: var(--wtr-heading); text-decoration: underline 2px; text-underline-offset: .14em; }
.wx-author-role { color: var(--wtr-tag-text); font: 600 var(--wtr-fs-ui-s)/1.35 var(--wtr-ff-sans); }
.wx-author-bio { margin: 2px 0 0; color: var(--wtr-text); font: 400 16.5px/1.55 var(--wtr-ff-serif); }
.wx-author-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font: 700 var(--wtr-fs-ui-s)/1.3 var(--wtr-ff-sans); }
.wx-author-links a { display: inline-flex; align-items: center; gap: 4px; min-block-size: 44px; margin: -7px 0; padding: 6px 0; color: var(--wtr-link); text-decoration: none; }
.wx-author-links a:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
/* share.css */
.wx .wtr-share:not(.wtr-share--byline) {
display: grid;
gap: 14px;
margin: 0;
padding: 20px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
font-family: var(--wtr-ff-sans);
}
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-h {
color: var(--wtr-meta);
font: 700 var(--wtr-fs-overline)/1.2 var(--wtr-ff-sans);
letter-spacing: .08em;
text-transform: uppercase;
}
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-list {
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-list > li { display: block; min-width: 0; margin: 0; }
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-b {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
box-sizing: border-box;
inline-size: 100%;
min-inline-size: 0;
block-size: 64px;
margin: 0;
padding: 0 4px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-sm);
background: var(--wtr-surface);
color: var(--wtr-heading);
font: 600 12.5px/1.2 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: border-color var(--wtr-dur-1) var(--wtr-ease);
}
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-b:hover { border-color: var(--wtr-control); color: var(--wtr-heading); text-decoration: none; }
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-b.is-copied { border-color: var(--wtr-control); color: var(--wtr-heading); }
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-i { inline-size: 22px; block-size: 22px; }
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-t { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; }
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-b:not(:has(.wtr-share-t))::after { content: var(--wx-sw, ""); }
.wx .wtr-share-b--whatsapp { --wx-sw: "WhatsApp"; }
.wx .wtr-share-b--facebook { --wx-sw: "Facebook"; }
.wx .wtr-share-b--x { --wx-sw: "X"; }
.wx .wtr-share-b--reddit { --wx-sw: "Reddit"; }
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-native { display: none; }
@media (max-width: 419px) {
.wx .wtr-share:not(.wtr-share--byline) .wtr-share-list:has(> li:nth-child(5)) .wtr-share-b { padding: 0 2px; font-size: 11px; letter-spacing: -.01em; }
}
@media (max-width: 599px) {
html:not(.wtr-no-nativeshare) .wx .wtr-share:not(.wtr-share--byline) .wtr-share-native {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
block-size: 48px;
margin: 0;
padding: 0 20px;
border: 1.5px solid var(--wtr-control);
border-radius: var(--wtr-radius-sm);
background: transparent;
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1 var(--wtr-ff-sans);
cursor: pointer;
}
}
/* comments.css */
.wx .wtrc {
--c-line: var(--wtr-border);
--c-mute: var(--wtr-meta);
--c-ink: var(--wtr-heading);
--c-accent: var(--wtr-btn);
--c-surface: var(--wtr-section);
--c-silver: var(--wtr-control);
--c-err: var(--wtr-loss);
display: grid;
gap: 16px;
margin: 32px 0 0;
padding: 20px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
color: var(--wtr-text);
font-family: var(--wtr-ff-sans);
}
.wx .wtrc-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.wx .wtrc-title { margin: 0; color: var(--wtr-heading); font: 800 20px/1.2 var(--wtr-ff-sans); letter-spacing: 0; }
.wx .wtrc-sort { display: flex; gap: 4px; padding: 0; border-radius: 0; background: none; }
.wx .wtrc-sort-btn {
position: relative;
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 8px 10px;
border-radius: 0;
background: none;
color: var(--wtr-meta);
font: 600 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans);
box-shadow: inset 0 -2px 0 transparent;
text-decoration: none;
}
.wx .wtrc-sort-btn::after { content: ""; position: absolute; inset: -4px 0; }
.wx .wtrc-sort-btn:hover { color: var(--wtr-heading); text-decoration: none; }
.wx .wtrc-sort-btn.is-on { background: none; color: var(--wtr-heading); box-shadow: inset 0 -2px 0 var(--wtr-indicator); }
.wx .wtrc-form { margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--wtr-border); }
.wx .wtrc-form-top { gap: 12px; }
.wx .wtrc-textarea,
.wx .wtrc-input,
.wx .wtrc-pick-box {
border: 1.5px solid var(--wtr-control);
border-radius: var(--wtr-radius-sm);
background: var(--wtr-surface);
color: var(--wtr-heading);
font: 500 16px/1.5 var(--wtr-ff-sans);
box-shadow: none;
}
.wx .wtrc-textarea { padding: 12px 14px; }
.wx .wtrc-input { min-height: 48px; padding: 0 14px; }
.wx .wtrc-textarea::placeholder, .wx .wtrc-input::placeholder { color: var(--wtr-meta); }
.wx .wtrc-textarea:focus, .wx .wtrc-input:focus { border-color: var(--wtr-control); box-shadow: none; outline: 2px solid var(--wtr-focus); outline-offset: 2px; }
.wx .wtrc-optin { color: var(--wtr-meta); font-size: var(--wtr-fs-caption); }
.wx .wtrc-optin input { inline-size: 22px; block-size: 22px; flex-basis: 22px; margin-top: 0; accent-color: var(--wtr-btn); }
.wx .wtrc-optin a, .wx .wtrc-guidelines a { color: var(--wtr-link); }
.wx .wtrc-count { color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/1.3 var(--wtr-ff-mono); }
.wx .wtrc-submit {
min-height: 44px;
padding: 0 16px;
border-radius: var(--wtr-radius-sm);
background: var(--wtr-btn);
color: var(--wtr-btn-text);
font: 600 var(--wtr-fs-ui)/1 var(--wtr-ff-sans);
}
.wx .wtrc-submit:hover:not(:disabled) { background: var(--wtr-btn-hover); }
.wx .wtrc-submit:disabled { opacity: 1; background: var(--wtr-border); color: var(--wtr-meta); }
.wx .wtrc-msg { border-radius: var(--wtr-radius-sm); background: var(--wtr-section); color: var(--wtr-heading); }
.wx .wtrc-msg.is-error { background: var(--wtr-section); color: var(--wtr-loss); box-shadow: inset 4px 0 0 var(--wtr-loss); }
.wx .wtrc-cancel-reply, .wx .wtrc-identity-toggle { color: var(--wtr-link); }
.wx .wtrc-guidelines { color: var(--wtr-meta); }
.wx .wtrc-avatar { flex: 0 0 36px; inline-size: 36px; block-size: 36px; }
.wx .wtrc-avatar :is(img, .wtrc-av-img), .wx .wtrc-av-blank { inline-size: 36px; block-size: 36px; border-radius: 50%; }
.wx .wtrc-av-blank { border: 1px solid var(--wtr-border); background: var(--wtr-section); }
.wx .wtrc-avatar .wx-avatar { inline-size: 36px; block-size: 36px; font-size: 13px; }
.wx .wtrc-comment { gap: 12px; padding: 16px 0 8px; border-top: 1px solid var(--wtr-border); }
.wx .wtrc-list > .wtrc-comment:first-child { border-top: 0; padding-top: 0; }
.wx .wtrc-head { gap: 6px 8px; margin-bottom: 6px; }
.wx .wtrc-author { color: var(--wtr-heading); font: 700 14.5px/1.3 var(--wtr-ff-sans); }
.wx .wtrc-time { color: var(--wtr-meta); font-size: var(--wtr-fs-caption); }
.wx .wtrc-body { color: var(--wtr-text); font: 400 16.5px/1.55 var(--wtr-ff-serif); }
.wx .wtrc-body a { color: var(--wtr-link); }
.wx .wtrc-badge {
gap: 4px;
block-size: 20px;
padding: 0 6px;
border: 0;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-tag-bg);
color: var(--wtr-tag-text);
font: 700 11px/20px var(--wtr-ff-sans);
letter-spacing: .04em;
}
.wx .wtrc-badge:has(.wtrc-badge-logo) {
inline-size: 16px;
block-size: 16px;
padding: 2px;
border-radius: var(--wtr-logo-16-r);
background: var(--wtr-logo-tile);
box-shadow: inset 0 0 0 1px var(--wtr-logo-ring);
}
.wx .wtrc-badge-logo { inline-size: 12px; block-size: 12px; flex-basis: 12px; mix-blend-mode: multiply; }
.wx .wtrc-badge:has(.wtrc-badge-logo) .wtrc-badge-txt { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wx .wtrc-actions { gap: 4px; margin: 4px 0 0 -10px; }
.wx .wtrc-actions button {
min-height: 44px;
padding: 0 10px;
border-radius: var(--wtr-radius-sm);
color: var(--wtr-meta);
font: 600 13.5px/1 var(--wtr-ff-sans);
}
.wx .wtrc-actions button:hover { background: var(--wtr-section); color: var(--wtr-heading); }
.wx .wtrc-vote.is-voted { color: var(--wtr-btn); }
.wx .wtrc-report { margin-left: 0; opacity: 1; }
.wx .wtrc-report:hover { color: var(--wtr-loss) !important; }
.wx .wtrc-replies:not(:empty) { margin-top: 4px; padding-left: 12px; border-left: 2px solid var(--wtr-border); }
.wx .wtrc-replies .wtrc-replies:not(:empty) { margin-left: 0; padding-left: 0; border-left: 0; }
.wx .wtrc-replies .wtrc-comment { gap: 10px; padding: 8px 0; border-top: 0; }
.wx .wtrc-replies .wtrc-avatar, .wx .wtrc-replies .wtrc-avatar :is(img, .wtrc-av-img) { flex-basis: 32px; inline-size: 32px; block-size: 32px; }
.wx .wtrc-replies .wtrc-avatar .wx-avatar { inline-size: 32px; block-size: 32px; font-size: 12px; }
.wx .wtrc-replies .wtrc-author { font-size: var(--wtr-fs-ui-s); }
.wx .wtrc-replies .wtrc-body { font-size: 16px; }
.wx .wtrc-empty { padding: 4px 0; }
.wx .wtrc-empty-h { margin: 0 0 4px; color: var(--wtr-heading); font: 700 var(--wtr-fs-ui)/1.4 var(--wtr-ff-sans); }
.wx .wtrc-empty-p { margin: 0; color: var(--wtr-meta); font-size: var(--wtr-fs-ui-s); }
.wx .wtrc-closed { margin: 0; padding-top: 12px; border-top: 1px solid var(--wtr-border); color: var(--wtr-meta); }
.wx .wtrc-claim { border: 1px solid var(--wtr-border); border-radius: var(--wtr-radius-md); background: var(--wtr-section); }
@media (max-width: 599px) {
.wx .wtrc { padding: 16px; }
.wx .wtrc-avatar, .wx .wtrc-avatar :is(img, .wtrc-av-img), .wx .wtrc-av-blank { flex-basis: 36px; inline-size: 36px; block-size: 36px; }
}
/* modal.css */
.wx-modal {
position: fixed;
inset: 0;
z-index: var(--wtr-z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.wx-modal-scrim { position: absolute; inset: 0; background: var(--wtr-scrim); }
.wx-modal-dialog {
position: relative;
display: grid;
gap: 16px;
box-sizing: border-box;
inline-size: 100%;
max-inline-size: 460px;
max-block-size: calc(100vh - 32px);
padding: 28px;
overflow-y: auto;
overscroll-behavior: contain;
border-radius: var(--wtr-radius-lg);
background: var(--wtr-surface);
color: var(--wtr-text);
box-shadow: var(--wtr-shadow-3);
font-family: var(--wtr-ff-sans);
}
.wx-modal-dialog:focus { outline: none; }
.wx-modal-close { position: absolute; top: 12px; right: 12px; }
.wx-modal-handle { display: none; }
.wx-modal-brand { display: flex; align-items: center; gap: 9px; padding-right: 40px; color: var(--wtr-tag-text); }
.wx-modal-brand-t { color: var(--wtr-heading); font: 800 var(--wtr-fs-caption)/1 var(--wtr-ff-sans); letter-spacing: .07em; text-transform: uppercase; }
.wx-modal-title { margin: 0; padding-right: 32px; color: var(--wtr-heading); font: 800 26px/1.15 var(--wtr-ff-sans); letter-spacing: -.01em; }
.wx-modal-intro { margin: 0; color: var(--wtr-text); font: 400 17px/1.5 var(--wtr-ff-serif); }
.wx-modal-or {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
color: var(--wtr-meta);
font-size: var(--wtr-fs-caption);
}
.wx-modal-or::before, .wx-modal-or::after { content: ""; block-size: 1px; background: var(--wtr-border); }
.wx-modal-foot { margin: 0; color: var(--wtr-meta); font-size: var(--wtr-fs-caption); line-height: 1.5; text-align: center; }
.wx-modal-dialog > .wx-btn:not(.wx-modal-close) { display: flex; inline-size: 100%; }
.wx-btn--surface { background: var(--wtr-surface); }
.wx-modal[data-state="open"] .wx-modal-scrim { animation: wx-fade var(--wtr-dur-3) var(--wtr-ease) both; }
.wx-modal[data-state="open"] .wx-modal-dialog { animation: wx-rise var(--wtr-dur-3) var(--wtr-ease) both; }
.wx-modal[data-state="closing"] .wx-modal-scrim { animation: wx-fade var(--wtr-dur-2) var(--wtr-ease) reverse both; }
.wx-modal[data-state="closing"] .wx-modal-dialog { animation: wx-rise var(--wtr-dur-2) var(--wtr-ease) reverse both; }
@keyframes wx-fade { from { opacity: 0; } }
@keyframes wx-rise { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 599px) {
.wx-modal { align-items: flex-end; padding: 0; }
.wx-modal-dialog {
max-inline-size: none;
max-block-size: 92vh;
padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
border-radius: var(--wtr-radius-lg) var(--wtr-radius-lg) 0 0;
}
.wx-modal-handle {
display: block;
justify-self: center;
inline-size: 40px;
block-size: 4px;
margin: -12px 0 -4px;
border-radius: 2px;
background: var(--wtr-border);
}
@keyframes wx-rise { from { transform: translateY(100%); } }
}
html.is-locked { overflow: hidden; }
html.is-locked body { overflow: hidden; }
/* toast.css */
.wx-toasts {
position: fixed;
top: var(--wx-toast-top, calc(var(--wtr-header-h) + 12px));
left: 50%;
z-index: var(--wtr-z-toast);
display: grid;
gap: 8px;
inline-size: min(400px, calc(100vw - 32px));
transform: translateX(-50%);
pointer-events: none;
}
.wx-toast {
--wx-edge: var(--wtr-control);
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 12px 4px 12px 14px;
border-radius: var(--wtr-radius-md);
background: var(--wtr-surface);
color: var(--wtr-heading);
box-shadow: var(--wtr-shadow-2), inset 0 0 0 1px var(--wtr-border), inset 4px 0 0 var(--wx-edge);
font: 600 14.5px/1.4 var(--wtr-ff-sans);
pointer-events: auto;
}
.wx-toast-i {
inline-size: 20px;
block-size: 20px;
background: var(--wx-edge);
-webkit-mask: var(--wx-info) center / 20px no-repeat;
mask: var(--wx-info) center / 20px no-repeat;
}
.wx-toast--success .wx-toast-i { -webkit-mask-image: var(--wx-tick); mask-image: var(--wx-tick); }
.wx-toast--error .wx-toast-i { -webkit-mask-image: var(--wx-alert); mask-image: var(--wx-alert); }
.wx-toast--success { --wx-edge: var(--wtr-win); }
.wx-toast--error { --wx-edge: var(--wtr-loss); }
.wx-toast-x {
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
margin: -12px 0;
padding: 0;
border: 0;
border-radius: var(--wtr-radius-sm);
background: none;
color: var(--wtr-meta);
cursor: pointer;
}
.wx-toast-x::before {
content: "";
inline-size: 18px;
block-size: 18px;
background: currentColor;
-webkit-mask: var(--wx-x) center / 18px no-repeat;
mask: var(--wx-x) center / 18px no-repeat;
}
.wx-toast-x:hover { color: var(--wtr-heading); background: var(--wtr-section); }
:root {
--wx-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E");
--wx-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}
.wx-toast[data-state="in"] { animation: wx-drop var(--wtr-dur-3) var(--wtr-ease) both; }
.wx-toast[data-state="out"] { animation: wx-drop var(--wtr-dur-2) var(--wtr-ease) reverse both; }
@keyframes wx-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (min-width: 1024px) {
.wx-toasts { top: var(--wx-toast-top, calc(48px + 12px + var(--wp-admin--admin-bar--height, 0px))); }
}
/* states.css */
.wx-state {
display: grid;
justify-items: center;
gap: 10px;
padding: 28px 20px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-md);
color: var(--wtr-meta);
font-family: var(--wtr-ff-sans);
text-align: center;
}
.wx-state--flush { border: 0; padding-inline: 0; }
.wx-state-icon {
display: grid;
place-items: center;
inline-size: 52px;
block-size: 52px;
border-radius: 50%;
background: var(--wtr-section);
color: var(--wtr-meta);
}
.wx-state-title { margin: 0; color: var(--wtr-heading); font: 700 18px/1.3 var(--wtr-ff-sans); }
.wx-state-text { margin: 0; max-inline-size: 34ch; color: var(--wtr-meta); font-size: var(--wtr-fs-ui-s); line-height: 1.5; }
.wx-state-action { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; margin: -4px 0; padding: 10px; color: var(--wtr-link); font: 700 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans); }
.wx-state-action:hover { color: var(--wtr-link-hover); }
.wx-state .wx-btn { margin-top: 4px; }
.wx-state--error {
justify-items: start;
text-align: left;
padding: 20px 20px 20px 24px;
box-shadow: inset 4px 0 0 var(--wtr-loss);
}
.wx-state--error .wx-state-icon { inline-size: auto; block-size: auto; background: none; color: var(--wtr-loss); }
.wx-state--error .wx-state-text { max-inline-size: 60ch; }
/* skeleton.css */
.wx-skel {
display: block;
block-size: var(--wx-sh, 16px);
inline-size: var(--wx-sw, 100%);
border-radius: var(--wtr-radius-xs);
background: var(--wtr-skeleton);
animation: wx-pulse 1.6s var(--wtr-ease) infinite;
}
.wx-skel--media { block-size: auto; aspect-ratio: 4 / 3; border-radius: var(--wtr-radius-img); }
.wx-skel--media-169 { block-size: auto; aspect-ratio: 16 / 9; border-radius: var(--wtr-radius-img); }
.wx-skel--thumb { inline-size: 96px; block-size: 96px; border-radius: var(--wtr-radius-img); }
.wx-skel--tile { inline-size: 32px; block-size: 32px; border-radius: var(--wtr-radius-sm); }
.wx-skel-stack { display: grid; gap: 10px; }
@media (prefers-reduced-motion: reduce) {
.wx-skel { animation: none; }
}
/* ads.css */
.wx .wtr-ad {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-content: stretch;
gap: 6px;
max-width: none;
min-height: 0;
margin: 32px 0;
padding: 0;
border: 0;
background: none;
justify-items: stretch;
}
.wx .wtr-ad-label {
order: -1;
color: var(--wtr-meta);
font: 600 11px/1.2 var(--wtr-ff-sans);
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}
.wx .wtr-ad > :not(.wtr-ad-label):not(.wtr-ad-close) {
min-height: 300px;
border-block: 1px solid var(--wtr-ad-border);
background: var(--wtr-ad-bg);
}
@media (max-width: 599px) {
.wx .wtr-ad:is(.wtr-ad--article-mid, .wtr-ad--article-end) { margin-inline: calc(-1 * var(--wtr-margin)); }
}
@media (min-width: 600px) {
.wx .wtr-ad > :not(.wtr-ad-label):not(.wtr-ad-close) { min-height: 250px; }
.wx .wtr-ad--leaderboard > :not(.wtr-ad-label) { min-height: 90px; }
}
.wx .wtr-ad--sidebar { position: sticky; top: var(--wtr-sticky-top); margin: 0; }
.wx .wtr-ad--sidebar > :not(.wtr-ad-label):not(.wtr-ad-close) { min-height: 600px; border: 1px solid var(--wtr-ad-border); }
.wx .wtr-ad--mobile-anchor,
.wx .wtr-ad-close { display: none; }
@media (max-width: 1023px) {
.wx .wtr-ad--leaderboard, .wx .wtr-ad--sidebar { display: none; }
}
/* shell-header.css */
.wx-shell {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: var(--wtr-z-header);
pointer-events: none;
font-family: var(--wtr-ff-sans);
}
.wx-shell > * { pointer-events: auto; }
@media (max-width: 600px) {
.admin-bar .wx-shell { top: 0; }
}
@media (max-width: 1023px) {
.wx-shell .wx-strip, .wx-shell .wx-mast, .wx-shell .wx-navbar { display: none; }
}
@media (min-width: 1024px) {
.wx-shell { top: calc(var(--wp-admin--admin-bar--height, 0px) - 112px); }
.wx-shell .wx-mob { display: none; }
}
.wx-lockup {
display: inline-flex;
flex: none;
align-items: center;
gap: 12px;
min-block-size: 44px;
color: var(--wtr-header-text);
text-decoration: none;
}
a.wx-lockup:hover { color: var(--wtr-header-text); text-decoration: none; }
.wx-lockup .wx-mark { inline-size: 51px; block-size: 30px; }
.wx-lockup-t {
font: 800 18px/1.2 var(--wtr-ff-sans);
letter-spacing: .07em;
text-transform: uppercase;
white-space: nowrap;
}
.wx-lockup--m { gap: 8px; block-size: 44px; }
.wx-lockup--m .wx-mark { inline-size: 37px; block-size: 22px; }
.wx-lockup--m .wx-lockup-t { font-size: 15px; }
.wx-lockup--foot { gap: 14px; color: var(--wtr-footer-text); }
a.wx-lockup--foot:hover { color: var(--wtr-footer-text); }
.wx-lockup--foot .wx-mark { inline-size: 68px; block-size: 40px; }
.wx-lockup--foot .wx-lockup-t { font-size: 20px; }
.wx-kbd {
flex: none;
padding: 2px 7px;
border: 1px solid var(--wtr-control);
border-radius: 4px;
color: var(--wtr-meta);
font: 600 11px/1.2 var(--wtr-ff-mono);
}
.wx-ibtn {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--wtr-radius-sm);
background: none;
color: inherit;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.wx-ibtn:hover { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; text-decoration: none; }
.wx-mast { block-size: 64px; background: var(--wtr-header); color: var(--wtr-header-text); }
.wx-mast-in {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
block-size: 100%;
padding-inline: var(--wtr-margin);
}
.wx-mast-tools { display: flex; align-items: center; gap: 8px; }
.wx-spill {
position: relative;
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
inline-size: 300px;
block-size: 40px;
margin: 0;
padding: 0 8px 0 14px;
border: 1px solid color-mix(in srgb, var(--wtr-header-text) 22%, transparent);
border-radius: var(--wtr-radius-pill);
background: color-mix(in srgb, var(--wtr-header-text) 8%, transparent);
color: var(--wtr-header-meta);
font: 500 14.5px/1.2 var(--wtr-ff-sans);
text-align: left;
cursor: pointer;
transition: background-color var(--wtr-dur-1) var(--wtr-ease);
}
.wx-spill { text-decoration: none; }
.wx-spill:hover { background: color-mix(in srgb, var(--wtr-header-text) 14%, transparent); color: var(--wtr-header-meta); text-decoration: none; }
.wx-spill::after, .wx-acct::after { content: ""; position: absolute; inset: -4px -2px; }
.wx-spill .wx-i { inline-size: 18px; block-size: 18px; }
.wx-spill-t { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-spill .wx-kbd { border-color: color-mix(in srgb, var(--wtr-header-text) 25%, transparent); color: var(--wtr-header-text); }
@media (max-width: 1279px) {
.wx-spill {
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border-color: transparent;
border-radius: var(--wtr-radius-sm);
background: transparent;
color: var(--wtr-header-text);
}
.wx-spill:hover { background: color-mix(in srgb, var(--wtr-header-text) 10%, transparent); color: var(--wtr-header-text); }
.wx-spill .wx-i { inline-size: 22px; block-size: 22px; }
.wx-spill-t, .wx-spill .wx-kbd { display: none; }
}
.wx-acct-box { display: flex; justify-content: flex-end; inline-size: 148px; }
.wx-acct {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
max-inline-size: 100%;
block-size: 40px;
padding: 0 14px 0 10px;
border: 1.5px solid var(--wtr-onband-line);
border-radius: var(--wtr-radius-pill);
color: var(--wtr-header-text);
font: 600 14.5px/1.2 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
}
.wx-acct:hover { background: color-mix(in srgb, var(--wtr-header-text) 10%, transparent); color: var(--wtr-header-text); text-decoration: none; }
.wx-acct .wx-i { inline-size: 20px; block-size: 20px; }
.wx-acct-t { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.wx-acct[data-state="me"] { padding-left: 5px; }
.wx-mob { transition: transform var(--wtr-dur-2) var(--wtr-ease); will-change: transform; }
.wx-mob[data-state="hidden"] { transform: translateY(-100%); }
.wx-mhead {
display: flex;
align-items: center;
justify-content: space-between;
block-size: 56px;
padding: 0 4px 0 16px;
background: var(--wtr-header);
color: var(--wtr-header-text);
}
@media (min-width: 600px) {
.wx-mhead { padding: 0 20px 0 32px; }
}
@media (max-width: 359px) {
.wx-mhead { padding-left: 12px; }
.wx-lockup--m { gap: 6px; }
.wx-lockup--m .wx-lockup-t { font-size: 13px; }
}
.wx-mhead-tools { display: flex; align-items: center; }
.wx-mhead-tools .wx-i { inline-size: 22px; block-size: 22px; }
/* shell-strip.css */
.wx-strip {
box-sizing: border-box;
block-size: 48px;
overflow: hidden;
background: var(--wtr-section);
border-bottom: 1px solid var(--wtr-border);
}
.wx-strip-in {
display: flex;
align-items: center;
gap: 8px;
block-size: 100%;
padding-inline: var(--wtr-margin);
}
.wx-strip-body { display: flex; flex: 1; align-items: center; gap: 8px; min-inline-size: 0; block-size: 100%; }
.wx-strip-date {
flex: none;
box-sizing: content-box;
inline-size: 86px;
padding-right: 6px;
color: var(--wtr-meta);
font: 800 var(--wtr-fs-overline)/1.2 var(--wtr-ff-sans);
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
}
.wx-strip-date time { font: inherit; }
.wx-strip-date-p { display: block; }
.wx-strip-stale {
flex: none;
color: var(--wtr-meta);
font: 800 var(--wtr-fs-overline)/1.2 var(--wtr-ff-sans);
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap;
}
.wx-strip-stale time { font: inherit; }
.wx-strip-list {
display: flex;
flex: 1;
align-items: center;
gap: 6px;
min-inline-size: 0;
block-size: 100%;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.wx-strip-list::-webkit-scrollbar { display: none; }
.wx-strip-all {
display: inline-flex;
flex: none;
align-items: center;
gap: 4px;
block-size: 44px;
padding: 0 4px 0 10px;
color: var(--wtr-link);
font: 700 13.5px/1.2 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
}
.wx-strip-all:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-pill {
position: relative;
display: inline-flex;
flex: none;
align-items: center;
gap: 8px;
block-size: 34px;
padding: 0 12px;
border-radius: var(--wtr-radius-sm);
background: var(--wtr-surface);
color: var(--wtr-heading);
font: 500 13.5px/1.3 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
scroll-snap-align: start;
}
.wx-pill::after { content: ""; position: absolute; inset: -5px 0; }
.wx-pill:hover { color: var(--wtr-heading); text-decoration: none; box-shadow: inset 0 0 0 1px var(--wtr-border); }
.wx-pill[data-wx-state="live"],
.wx-pill[data-wx-state="live"]:hover { box-shadow: inset 3px 0 0 var(--wtr-signal); }
.wx-pill-st,
.wx-mpill .wx-pill-st {
display: inline-flex;
align-items: center;
gap: 3px;
color: var(--wtr-meta);
font: 600 11.5px/1.3 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.wx-pill-st time { font: inherit; }
[data-wx-state="live"] > .wx-pill-st { min-inline-size: 3ch; color: var(--wtr-signal-ink); }
[data-wx-state="ht"] > .wx-pill-st {
padding: 1px 5px;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-cta);
color: var(--wtr-cta-text);
}
[data-wx-state="int"] > .wx-pill-st,
[data-wx-state="abd"] > .wx-pill-st,
[data-wx-state="pst"] > .wx-pill-st { color: var(--wtr-loss); }
[data-wx-state="ht"] > .wx-pill-st::before {
content: "";
flex: none;
inline-size: 7px;
block-size: 8px;
background: linear-gradient(90deg, currentColor 0 2.5px, transparent 2.5px 4.5px, currentColor 4.5px 7px);
}
.wx-pill-t { max-inline-size: 160px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.wx-pill-t[data-wx-lead] { font-weight: 800; }
.wx-pill-sc {
display: inline-flex;
justify-content: center;
font: 600 14px/1.3 var(--wtr-ff-mono);
font-variant-numeric: tabular-nums;
}
.wx-pill:is([data-wx-state="live"], [data-wx-state="ht"], [data-wx-state="ft"], [data-wx-state="int"], [data-wx-state="abd"]) .wx-pill-sc { min-inline-size: 5ch; }
.wx-pill:is([data-wx-state="pre"], [data-wx-state="pst"]) [data-wx-score] { display: none; }
.wx-pill:not([data-wx-state="pre"], [data-wx-state="pst"]) .wx-pill-v { display: none; }
.wx-pill[data-wx-state="pst"] .wx-pill-t { text-decoration: line-through; }
.wx-mstrip {
box-sizing: border-box;
display: flex;
align-items: center;
gap: 6px;
block-size: 56px;
padding: 0 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
overscroll-behavior-x: contain;
background: var(--wtr-section);
border-bottom: 1px solid var(--wtr-border);
}
.wx-mstrip::-webkit-scrollbar { display: none; }
.wx-mstrip-n {
display: inline-flex;
flex: none;
align-items: center;
gap: 5px;
block-size: 22px;
padding: 0 7px;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-signal);
color: var(--wtr-signal-text);
font: 800 11px/1 var(--wtr-ff-sans);
letter-spacing: .08em;
white-space: nowrap;
}
.wx-mstrip-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.wx-mpill {
position: relative;
display: grid;
flex: none;
grid-template-columns: auto auto auto;
align-items: center;
gap: 2px 8px;
box-sizing: border-box;
block-size: 48px;
padding: 5px 10px;
border-radius: var(--wtr-radius-sm);
background: var(--wtr-surface);
color: var(--wtr-heading);
text-decoration: none;
}
.wx-mpill:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-mpill[data-wx-state="live"] { box-shadow: inset 3px 0 0 var(--wtr-signal); }
.wx-mpill-t { max-inline-size: 112px; overflow: hidden; font: 500 13px/18px var(--wtr-ff-sans); text-overflow: ellipsis; white-space: nowrap; }
.wx-mpill-t[data-wx-lead] { font-weight: 800; }
.wx-mpill-sc { min-inline-size: 2ch; font: 600 13.5px/18px var(--wtr-ff-mono); font-variant-numeric: tabular-nums; text-align: right; }
.wx-mpill .wx-pill-st { grid-row: span 2; grid-column: 3; margin-left: 4px; }
/* shell-nav.css */
.wx-navbar {
position: relative;
box-sizing: border-box;
block-size: 48px;
background: var(--wtr-surface);
border-bottom: 1px solid var(--wtr-border);
transition: box-shadow var(--wtr-dur-2) var(--wtr-ease);
}
.wx-navbar[data-state="stuck"] { box-shadow: var(--wtr-shadow-1); }
.wx-nav {
position: relative;
display: flex;
align-items: flex-start;
block-size: 48px;
padding-inline: var(--wtr-margin);
}
.wx-nav-mini {
position: absolute;
top: 0;
left: var(--wtr-margin);
display: flex;
align-items: center;
block-size: 47px;
min-inline-size: 44px;
color: var(--wtr-tag-text);
opacity: 0;
visibility: hidden;
transition: opacity var(--wtr-dur-2) var(--wtr-ease), visibility 0s linear var(--wtr-dur-2);
}
.wx-nav-mini .wx-mark { inline-size: 41px; block-size: 24px; }
.wx-nav-mini:hover { color: var(--wtr-tag-text); }
.wx-nav-list {
display: flex;
align-items: center;
margin: 0 0 0 -14px;
padding: 0;
list-style: none;
}
.wx-nav-item { display: flex; }
.wx-nav-t,
.wx-nav-a {
position: relative;
display: flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
block-size: 48px;
margin: 0;
padding: 0 14px;
border: 0;
background: none;
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-shadow: inset 0 -3px 0 transparent;
transition: transform var(--wtr-dur-2) var(--wtr-ease), box-shadow var(--wtr-dur-1) var(--wtr-ease);
}
.wx-nav-a { gap: 6px; }
.wx-nav-t:hover,
.wx-nav-a:hover { color: var(--wtr-heading); text-decoration: none; box-shadow: inset 0 -3px 0 var(--wtr-border); }
.wx-nav-a[aria-current="page"],
.wx-nav-t[aria-current] { font-weight: 800; box-shadow: inset 0 -3px 0 var(--wtr-indicator); }
.wx-nav-t[aria-expanded="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--wtr-indicator); }
.wx-nav-t .wx-i { inline-size: 18px; block-size: 18px; transition: transform var(--wtr-dur-2) var(--wtr-ease); }
.wx-nav-t[aria-expanded="true"] .wx-i { transform: rotate(180deg); }
.wx-nav-dot { flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--wtr-accent); }
.wx-nav-search {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
align-self: center;
margin: 0 0 0 auto;
padding: 0;
border: 0;
border-radius: var(--wtr-radius-sm);
background: none;
color: var(--wtr-heading);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity var(--wtr-dur-2) var(--wtr-ease), visibility 0s linear var(--wtr-dur-2);
}
.wx-nav-search:hover { background: var(--wtr-section); color: var(--wtr-heading); text-decoration: none; }
.wx-nav-search .wx-i { inline-size: 22px; block-size: 22px; }
[data-state="stuck"] .wx-nav-mini,
[data-state="stuck"] .wx-nav-search { opacity: 1; visibility: visible; transition-delay: 0s; }
[data-state="stuck"] .wx-nav-t,
[data-state="stuck"] .wx-nav-a,
[data-state="stuck"] .wx-more { transform: translateX(56px); }
.wx-nav-moreli { position: relative; display: none; }
@media (max-width: 1279px) {
.wx-nav-item--more { display: none; }
.wx-nav-moreli { display: flex; }
}
.wx-more {
position: absolute;
top: 100%;
left: 0;
z-index: var(--wtr-z-mega);
box-sizing: border-box;
min-inline-size: 200px;
margin: 4px 0 0;
padding: 6px;
list-style: none;
border-radius: var(--wtr-radius-md);
background: var(--wtr-surface);
box-shadow: var(--wtr-shadow-2), inset 0 0 0 1px var(--wtr-border);
transition: transform var(--wtr-dur-2) var(--wtr-ease);
}
.wx-more-a {
display: flex;
align-items: center;
gap: 6px;
block-size: 44px;
padding: 0 12px;
border-radius: var(--wtr-radius-sm);
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
text-decoration: none;
white-space: nowrap;
}
.wx-more-a:hover { background: var(--wtr-section); color: var(--wtr-heading); text-decoration: none; }
.wx-more-a[aria-current="page"] { font-weight: 800; box-shadow: inset 3px 0 0 var(--wtr-indicator); }
/* shell-mega.css */
.wx-mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: var(--wtr-z-mega);
max-block-size: calc(100vh - 48px - var(--wp-admin--admin-bar--height, 0px));
overflow-y: auto;
overscroll-behavior: contain;
background: var(--wtr-surface);
border-bottom: 1px solid var(--wtr-border);
box-shadow: var(--wtr-shadow-2);
color: var(--wtr-text);
font-family: var(--wtr-ff-sans);
}
.wx-mega-scrim {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: calc(var(--wtr-z-mega) - 1);
block-size: 100vh;
background: var(--wtr-scrim);
opacity: .45;
}
.wx-mega-in { padding: 28px var(--wtr-margin) 32px; }
.wx-mlabel {
display: block;
margin-bottom: 8px;
color: var(--wtr-meta);
font: 700 var(--wtr-fs-overline)/16px var(--wtr-ff-sans);
letter-spacing: .1em;
text-transform: uppercase;
}
.wx-mcomps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.wx-mcol { display: grid; align-content: start; gap: 4px; min-inline-size: 0; }
.wx-mcomp {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
align-items: center;
gap: 12px;
margin: 0 -8px;
padding: 8px;
border-radius: 8px;
color: var(--wtr-heading);
text-decoration: none;
}
.wx-mcomp:hover { background: var(--wtr-section); color: var(--wtr-heading); text-decoration: none; }
.wx-mcomp-t { display: grid; gap: 1px; min-inline-size: 0; }
.wx-mcomp-n { font: 700 15.5px/21px var(--wtr-ff-sans); }
.wx-mcomp-s { color: var(--wtr-meta); font: 400 12.5px/17px var(--wtr-ff-sans); }
.wx-mcomp-s time { font: inherit; }
.wx-mcomp-live { color: var(--wtr-signal-ink); font-weight: 600; }
.wx-mcomp-live::before {
content: "";
display: inline-block;
inline-size: 6px;
block-size: 6px;
margin: 0 5px 1px 0;
border-radius: 50%;
background: var(--wtr-signal);
vertical-align: middle;
}
.wx-mfeat { display: none; }
@media (min-width: 1280px) {
.wx-mcomps.has-feature { grid-template-columns: repeat(3, minmax(0, 1fr)) 336px; }
.wx-mfeat {
display: grid;
align-content: start;
gap: 12px;
padding-left: 32px;
border-left: 1px solid var(--wtr-border);
}
}
.wx-mfeat .wx-mlabel { margin: 0; }
.wx-mfeat-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--wtr-radius-img); background: var(--wtr-section); }
.wx-mfeat-img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.wx-mfeat-h { position: relative; color: var(--wtr-heading); font: 700 17px/1.25 var(--wtr-ff-sans); text-decoration: none; }
.wx-mfeat-h::after { content: ""; position: absolute; inset: -1px 0; }
.wx-mfeat-h:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .18em; }
.wx-mfeat-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wx-mfeat-links a {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--wtr-link);
font: 700 14px/18px var(--wtr-ff-sans);
text-decoration: none;
}
.wx-mfeat-links a:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-mteams.wx-mega-in {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 32px;
padding-block: 24px 28px;
}
.wx-mtabs-col { display: grid; align-content: start; padding-right: 24px; border-right: 1px solid var(--wtr-border); }
.wx-mtabs { display: grid; gap: 2px; }
.wx-mtab {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
block-size: 44px;
margin: 0;
padding: 0 12px;
border: 0;
border-radius: var(--wtr-radius-sm);
background: transparent;
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
text-align: left;
cursor: pointer;
}
.wx-mtab:hover { background: var(--wtr-section); }
.wx-mtab[aria-selected="true"] { background: var(--wtr-section); font-weight: 700; }
.wx-mtab-n { color: var(--wtr-meta); font: 600 12.5px/1 var(--wtr-ff-sans); }
.wx-mnudge { display: grid; gap: 8px; margin-top: 14px; padding: 14px; border-radius: 8px; background: var(--wtr-section); }
.wx-mnudge span { color: var(--wtr-text); font: 400 13.5px/1.45 var(--wtr-ff-sans); }
.wx-mnudge a, .wx-mteam-head a {
display: inline-flex;
align-items: center;
gap: 4px;
justify-self: start;
color: var(--wtr-link);
font: 700 14px/1.3 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-mnudge a:hover, .wx-mteam-head a:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-mteam { display: grid; align-content: start; gap: 14px; min-inline-size: 0; }
.wx-mteam-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.wx-mteam-head .wx-mlabel { margin: 0; }
.wx-mteam-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2px 16px;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 1280px) {
.wx-mteam-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wx-mteam-grid li { min-inline-size: 0; }
.wx-mteam-a {
display: flex;
align-items: center;
gap: 12px;
min-inline-size: 0;
block-size: 48px;
margin: 0 -8px;
padding: 0 8px;
border-radius: 8px;
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-mteam-a:hover { background: var(--wtr-section); color: var(--wtr-heading); text-decoration: none; }
.wx-mteam-a span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* shell-drawer.css */
.wx-drawer {
position: fixed;
inset: 0;
z-index: var(--wtr-z-drawer);
display: flex;
flex-direction: column;
background: var(--wtr-surface);
color: var(--wtr-text);
font-family: var(--wtr-ff-sans);
}
.wx-drawer[data-state="open"] { animation: wx-dr-in var(--wtr-dur-3) var(--wtr-ease); }
.wx-drawer[data-state="closing"] { animation: wx-dr-out var(--wtr-dur-2) var(--wtr-ease) forwards; }
@keyframes wx-dr-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes wx-dr-out { to { opacity: 0; transform: translateY(-12px); } }
.wx-dr-top {
display: flex;
flex: none;
align-items: center;
justify-content: space-between;
block-size: 56px;
padding: 0 4px 0 16px;
background: var(--wtr-header);
color: var(--wtr-header-text);
}
.wx-dr-top .wx-i { inline-size: 22px; block-size: 22px; }
.wx-dr-body {
flex: 1;
min-block-size: 0;
padding: 12px 16px var(--wtr-footer-pad-mobile);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
}
@media (min-width: 600px) {
.wx-dr-top { padding: 0 20px 0 32px; }
.wx-dr-body { padding-inline: 32px; }
}
.wx-dr-search {
display: flex;
align-items: center;
gap: 10px;
box-sizing: border-box;
inline-size: 100%;
block-size: 48px;
margin: 0 0 8px;
padding: 0 14px;
border: 1.5px solid var(--wtr-control);
border-radius: var(--wtr-radius-pill);
background: var(--wtr-bg);
color: var(--wtr-meta);
font: 500 16px/1.2 var(--wtr-ff-sans);
text-align: left;
cursor: pointer;
}
.wx-dr-search .wx-i { inline-size: 20px; block-size: 20px; }
.wx-dr-teams { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--wtr-border); }
.wx-dr-label {
color: var(--wtr-meta);
font: 700 var(--wtr-fs-overline)/16px var(--wtr-ff-sans);
letter-spacing: .1em;
text-transform: uppercase;
}
.wx-dr-teams-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-dr-team {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
block-size: 40px;
padding: 0 14px 0 6px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-pill);
background: var(--wtr-bg);
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-dr-team::after { content: ""; position: absolute; inset: -2px 0; }
.wx-dr-team:hover { border-color: var(--wtr-control); color: var(--wtr-heading); text-decoration: none; }
.wx-dr-acc,
.wx-dr-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
box-sizing: border-box;
inline-size: 100%;
block-size: 56px;
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid var(--wtr-border);
background: none;
color: var(--wtr-heading);
font: 700 18px/1.2 var(--wtr-ff-sans);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.wx-dr-row:hover, .wx-dr-acc:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-dr-acc .wx-i { inline-size: 22px; block-size: 22px; transition: transform var(--wtr-dur-2) var(--wtr-ease); }
.wx-dr-acc[aria-expanded="true"] .wx-i { transform: rotate(180deg); }
.wx-dr-row[aria-current="page"],
.wx-dr-acc[aria-current] { padding-left: 12px; font-weight: 800; box-shadow: inset 3px 0 0 var(--wtr-indicator); }
.wx-dr-panel { display: grid; padding: 6px 0 10px; border-bottom: 1px solid var(--wtr-border); }
.wx-dr-sub {
display: flex;
align-items: center;
gap: 12px;
block-size: 48px;
color: var(--wtr-heading);
font: 500 16px/1.2 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-dr-sub:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-dr-sub--group { justify-content: space-between; }
.wx-dr-count { display: flex; align-items: center; gap: 6px; color: var(--wtr-meta); font-size: var(--wtr-fs-caption); }
.wx-dr-count .wx-i { inline-size: 18px; block-size: 18px; }
.wx-dr-all {
display: inline-flex;
align-items: center;
gap: 4px;
block-size: 44px;
color: var(--wtr-link);
font: 700 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-dr-all:hover { color: var(--wtr-link-hover); text-decoration: underline; text-underline-offset: .18em; }
.wx-dr-badge {
flex: none;
padding: 3px 8px;
border-radius: var(--wtr-radius-pill);
background: var(--wtr-cta);
color: var(--wtr-cta-text);
font: 700 12.5px/1.3 var(--wtr-ff-sans);
}
.wx-dr-acct { display: grid; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--wtr-border); }
.wx-dr-acct-p { margin: 0; color: var(--wtr-text); font: 400 var(--wtr-fs-ui)/1.45 var(--wtr-ff-sans); }
.wx-dr-acct-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wx-dr-me { display: flex; align-items: center; gap: 12px; min-block-size: 48px; color: var(--wtr-heading); text-decoration: none; }
.wx-dr-me:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-dr-me-t { display: grid; gap: 1px; min-inline-size: 0; }
.wx-dr-me-t strong { font: 700 16px/1.3 var(--wtr-ff-sans); }
.wx-dr-me-t span { color: var(--wtr-meta); font-size: var(--wtr-fs-caption); }
.wx-dr-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--wtr-border); }
.wx-dr-theme-l { color: var(--wtr-heading); font: 600 16px/1.2 var(--wtr-ff-sans); }
.wx-dr-small { display: flex; flex-wrap: wrap; gap: 0 18px; padding-top: 12px; }
.wx-dr-smalla {
position: relative;
display: inline-flex;
align-items: center;
min-block-size: 44px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--wtr-meta);
font: 400 var(--wtr-fs-ui-s)/1.3 var(--wtr-ff-sans);
text-decoration: none;
cursor: pointer;
}
.wx-dr-smalla::after { content: ""; position: absolute; inset: 0 -4px; }
.wx-dr-smalla:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .18em; }
/* shell-search.css */
.wx-search { position: fixed; inset: 0; z-index: var(--wtr-z-msearch); font-family: var(--wtr-ff-sans); }
.wx-search-scrim { display: none; }
.wx-search-dlg {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: var(--wtr-surface);
color: var(--wtr-text);
}
.wx-search-in { display: flex; flex: 1; flex-direction: column; min-block-size: 0; }
.wx-search-bar {
display: flex;
flex: none;
align-items: center;
gap: 4px;
margin: 0;
padding: 6px 8px 6px 4px;
border-bottom: 1px solid var(--wtr-border);
}
.wx-search-back { color: var(--wtr-heading); }
.wx-search-back .wx-i { inline-size: 22px; block-size: 22px; }
.wx-search-box { position: relative; flex: 1; min-inline-size: 0; }
.wx-search-box > .wx-i--search { display: none; }
.wx-search-q {
box-sizing: border-box;
inline-size: 100%;
block-size: 44px;
margin: 0;
padding: 0 40px 0 14px;
border: 1.5px solid var(--wtr-focus);
border-radius: var(--wtr-radius-pill);
background: var(--wtr-bg);
color: var(--wtr-heading);
font: 500 16px/1.2 var(--wtr-ff-sans);
-webkit-appearance: none;
appearance: none;
}
.wx-search-q::placeholder { color: var(--wtr-meta); opacity: 1; }
.wx-search-q:focus, .wx-search-q:focus-visible { outline: none; }
.wx-search-q::-webkit-search-cancel-button,
.wx-search-q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.wx-search-clear {
position: absolute;
top: 0;
right: 2px;
display: flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--wtr-radius-pill);
background: none;
color: var(--wtr-meta);
cursor: pointer;
}
.wx-search-clear .wx-i { inline-size: 18px; block-size: 18px; stroke-width: 2; }
.wx-search-close { display: none; }
.wx-search-body {
flex: 1;
min-block-size: 0;
padding: 16px 16px var(--wtr-footer-pad-mobile);
overflow-y: auto;
overscroll-behavior: contain;
}
@media (min-width: 600px) {
.wx-search-bar { padding-inline: 20px 32px; }
.wx-search-body { padding-inline: 32px; }
}
.wx-search [data-wx-panel] { display: none; }
.wx-search-dlg[data-state="trending"] [data-wx-panel="trending"],
.wx-search-dlg[data-state="results"] [data-wx-panel="results"],
.wx-search-dlg[data-state="empty"] [data-wx-panel="empty"],
.wx-search-dlg[data-state="error"] [data-wx-panel="error"] { display: grid; }
.wx-search-res[aria-busy="true"] { opacity: .6; transition: opacity var(--wtr-dur-1) linear; }
.wx-sr-label {
display: block;
color: var(--wtr-meta);
font: 700 var(--wtr-fs-overline)/16px var(--wtr-ff-sans);
letter-spacing: .1em;
text-transform: uppercase;
}
.wx-search-idle { align-content: start; gap: 20px; }
.wx-search-trend, .wx-search-recent { display: grid; align-content: start; gap: 10px; }
.wx-search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-schip {
position: relative;
display: inline-flex;
align-items: center;
box-sizing: border-box;
block-size: 40px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--wtr-border);
border-radius: var(--wtr-radius-pill);
background: var(--wtr-bg);
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui-s)/1.2 var(--wtr-ff-sans);
text-decoration: none;
cursor: pointer;
}
.wx-schip::after { content: ""; position: absolute; inset: -4px -1px; }
.wx-schip:hover { border-color: var(--wtr-control); color: var(--wtr-heading); text-decoration: none; }
.wx-search-recent-list { display: grid; }
.wx-recent-b {
display: flex;
align-items: center;
gap: 12px;
inline-size: 100%;
block-size: 48px;
margin: 0;
padding: 0;
border: 0;
border-bottom: 1px solid var(--wtr-border);
background: none;
color: var(--wtr-heading);
font: 500 16px/1.2 var(--wtr-ff-sans);
text-align: left;
cursor: pointer;
}
.wx-recent-b .wx-i { color: var(--wtr-meta); inline-size: 18px; block-size: 18px; }
.wx-search-quick { display: none; }
.wx-sr-groups, .wx-sr-side, .wx-sr-main { display: grid; align-content: start; gap: 20px; min-inline-size: 0; }
.wx-sr-group { display: grid; gap: 4px; min-inline-size: 0; }
.wx-sr-ent {
display: flex;
align-items: center;
gap: 12px;
min-block-size: 56px;
color: var(--wtr-heading);
text-decoration: none;
}
.wx-sr-ent:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-sr-ent:hover strong { text-decoration: underline; text-underline-offset: .18em; }
.wx-sr-tile.wx-tile { --wx-t: 40px; --wx-tp: 5px; --wx-tr: 7px; --wx-tf: 12px; }
.wx-sr-tile .wx-tile-mono::after { display: none; }
.wx-sr-ent-t { display: grid; gap: 1px; min-inline-size: 0; }
.wx-sr-ent-t strong { color: var(--wtr-heading); font: 700 16px/1.3 var(--wtr-ff-sans); }
.wx-sr-ent-t span { color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/1.35 var(--wtr-ff-sans); }
.wx-sr-ent-t time { font: inherit; }
.wx-sr-group--stories .wx-sr-label { margin-bottom: 4px; }
.wx-sr-story {
display: grid;
gap: 3px;
padding: 12px 0;
border-bottom: 1px solid var(--wtr-border);
color: var(--wtr-heading);
text-decoration: none;
}
.wx-sr-story:hover { color: var(--wtr-heading); text-decoration: none; }
.wx-sr-story:hover strong { text-decoration: underline; text-underline-offset: .18em; }
.wx-sr-story-t { display: grid; gap: 3px; min-inline-size: 0; }
.wx-sr-story-t strong { font: 700 16px/1.3 var(--wtr-ff-sans); }
.wx-sr-story-t span { color: var(--wtr-meta); font: 400 var(--wtr-fs-caption)/1.35 var(--wtr-ff-sans); }
.wx-sr-thumb, .wx-sr-dsk { display: none; }
.wx-sr-all {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
block-size: 48px;
padding: 0 16px;
border: 1.5px solid var(--wtr-control);
border-radius: var(--wtr-radius-sm);
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-sr-all:hover { background: var(--wtr-tag-bg); color: var(--wtr-heading); text-decoration: none; }
.wx-search .wx-search-empty { justify-items: center; gap: 10px; padding: 40px 8px; text-align: center; }
.wx-search .wx-search-empty-i {
display: grid;
place-items: center;
inline-size: 48px;
block-size: 48px;
border-radius: 50%;
background: var(--wtr-section);
color: var(--wtr-meta);
}
.wx-search .wx-search-empty-i .wx-i { inline-size: 22px; block-size: 22px; }
.wx-search .wx-search-empty strong { color: var(--wtr-heading); font: 700 17px/1.3 var(--wtr-ff-sans); }
.wx-search .wx-search-empty p { max-inline-size: 30ch; margin: 0; color: var(--wtr-meta); font: 400 14.5px/1.5 var(--wtr-ff-sans); }
.wx-search-err {
grid-template-columns: auto 1fr;
align-items: start;
gap: 10px;
padding: 16px;
border-radius: var(--wtr-radius-md);
box-shadow: inset 4px 0 0 var(--wtr-loss), inset 0 0 0 1px var(--wtr-border);
color: var(--wtr-heading);
}
.wx-search-err .wx-i { color: var(--wtr-loss); }
.wx-search-err p { margin: 0; font: 600 var(--wtr-fs-ui)/1.45 var(--wtr-ff-sans); }
@media (min-width: 1024px) {
.wx-search { z-index: var(--wtr-z-modal); }
.wx-search-scrim { position: absolute; inset: 0; display: block; background: var(--wtr-scrim); }
.wx-search-dlg {
inset: 0 0 auto;
max-block-size: 100vh;
overflow-y: auto;
border-bottom: 1px solid var(--wtr-border);
box-shadow: var(--wtr-shadow-3);
}
.wx-search-in {
display: grid;
gap: 24px;
box-sizing: border-box;
inline-size: min(960px, 100% - 2 * var(--wtr-margin));
margin-inline: auto;
padding: 28px 0 36px;
}
.wx-search-bar { gap: 12px; padding: 0; border: 0; }
.wx-search-back { display: none; }
.wx-search-box > .wx-i--search { position: absolute; top: 20px; left: 20px; display: block; color: var(--wtr-meta); pointer-events: none; }
.wx-search-q { block-size: 64px; padding: 0 56px 0 58px; border-width: 2px; font-size: 20px; }
.wx-search-clear { top: 10px; right: 10px; inline-size: 44px; }
.wx-search-close {
display: flex;
align-items: center;
gap: 8px;
block-size: 48px;
margin: 0;
padding: 0 14px;
border: 0;
border-radius: var(--wtr-radius-sm);
background: none;
color: var(--wtr-heading);
font: 600 var(--wtr-fs-ui)/1.2 var(--wtr-ff-sans);
cursor: pointer;
}
.wx-search-close:hover { background: var(--wtr-section); }
.wx-search-body { padding: 0; overflow: visible; }
.wx-search-dlg[data-state="trending"] .wx-search-idle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.wx-search .wx-search-recent { display: none; }
.wx-search-quick { display: grid; align-content: start; gap: 0; }
.wx-search-quick .wx-sr-label { margin-bottom: 4px; }
.wx-search-quick a {
display: flex;
align-items: center;
min-block-size: 40px;
color: var(--wtr-heading);
font: 600 16px/1.3 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-search-quick a:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .18em; }
.wx-sr-groups { grid-template-columns: 280px minmax(0, 1fr); gap: 48px; }
.wx-sr-groups:not(:has(.wx-sr-side)) { grid-template-columns: minmax(0, 1fr); }
.wx-sr-main { gap: 0; }
.wx-sr-ent { min-block-size: 0; margin: 0 -8px; padding: 8px; border-radius: 8px; }
.wx-sr-ent:hover, .wx-sr-ent:focus-visible { background: var(--wtr-section); }
.wx-sr-ent:hover strong { text-decoration: none; }
.wx-sr-tile.wx-tile { --wx-t: 48px; --wx-tp: 6px; --wx-tr: 8px; --wx-tf: 14px; }
.wx-sr-ent--p { padding: 6px 8px; }
.wx-sr-ent--p strong { font-size: 15px; }
.wx-sr-ent--p .wx-sr-ent-t span { font-size: 12.5px; }
.wx-sr-story { grid-template-columns: minmax(0, 1fr) 120px; gap: 16px; }
.wx-sr-story-t { gap: 4px; align-content: start; }
.wx-sr-story-t strong { font-size: 17px; line-height: 1.28; }
.wx-sr-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--wtr-radius-img); background: var(--wtr-section); }
.wx-sr-img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.wx-sr-dsk { display: inline; }
.wx-sr-all { justify-self: start; block-size: 44px; margin-top: 16px; }
.wx-search .wx-search-empty { justify-items: start; gap: 6px; padding: 24px 0; text-align: left; }
.wx-search .wx-search-empty-i { display: none; }
.wx-search .wx-search-empty strong { font-size: 20px; }
.wx-search .wx-search-empty p { max-inline-size: none; font-size: 15px; }
}
/* shell-footer.css */
.wx-foot { background: var(--wtr-footer-bg); color: var(--wtr-footer-text); font-family: var(--wtr-ff-sans); }
.wx-foot-top { display: grid; gap: 32px; padding: 32px var(--wtr-margin) 28px; }
@media (min-width: 600px) {
.wx-foot-top { padding-block: 40px 32px; }
}
@media (min-width: 1280px) {
.wx-foot-top { grid-template-columns: 400px minmax(0, 1fr); gap: 80px; padding-block: 56px 40px; }
}
.wx-foot-brand { display: grid; align-content: start; gap: 20px; min-inline-size: 0; }
.wx-foot-mission { margin: 0; color: var(--wtr-footer-text); font: 400 17px/1.55 var(--wtr-ff-sans); }
.wx-newsletter.wx-newsletter--foot { border-radius: 0; background: none; color: var(--wtr-footer-text); }
.wx-newsletter--foot .wx-nl-form { gap: 10px; padding: 0; }
.wx-newsletter--foot .wx-nl-title { color: var(--wtr-footer-text); font: 700 16px/1.3 var(--wtr-ff-sans); letter-spacing: 0; }
.wx-newsletter--foot .wx-nl-fields { gap: 8px; }
.wx-newsletter--foot .wtr-nl-email::placeholder { color: var(--wtr-meta); }
.wx-newsletter--foot .wx-btn--cta { padding: 0 20px; font-weight: 700; }
.wx-newsletter--foot .wx-nl-fine { color: var(--wtr-footer-meta); font-size: 12.5px; line-height: 1.45; }
.wx-newsletter--foot .wtr-nl-status { color: var(--wtr-footer-text); }
.wx-foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; min-inline-size: 0; }
@media (min-width: 600px) {
.wx-foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wx-foot-col { min-inline-size: 0; }
.wx-foot-h {
margin: 0 0 8px;
color: var(--wtr-footer-meta);
font: 700 var(--wtr-fs-overline)/16px var(--wtr-ff-sans);
letter-spacing: .1em;
text-transform: uppercase;
}
.wx-foot-col ul { display: grid; margin: 0; padding: 0; list-style: none; }
.wx-foot-col a {
display: flex;
align-items: center;
min-block-size: 44px;
color: var(--wtr-footer-text);
font: 400 var(--wtr-fs-ui)/1.3 var(--wtr-ff-sans);
text-decoration: none;
}
.wx-foot a:hover { color: var(--wtr-footer-text); text-decoration: underline; text-underline-offset: .18em; }
.wx-foot-legal { border-top: 1px solid color-mix(in srgb, var(--wtr-footer-meta) 22%, transparent); }
.wx-foot-legal-in {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 24px;
padding: 8px var(--wtr-margin) var(--wtr-footer-pad-mobile);
}
@media (min-width: 600px) {
.wx-foot-legal-in { padding-bottom: 96px; }
}
@media (min-width: 1024px) {
.wx-foot-legal-in { padding-block: 12px; }
}
.wx-foot-copy { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--wtr-footer-meta); font-size: var(--wtr-fs-caption); }
.wx-foot-legal-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.wx-foot-legal-links a,
.wx-foot .wx-cookie-settings {
display: inline-flex;
align-items: center;
min-block-size: 44px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--wtr-footer-text);
font: 400 13.5px/1.3 var(--wtr-ff-sans);
text-decoration: none;
cursor: pointer;
}
.wx-foot .wx-cookie-settings { text-decoration: underline; text-underline-offset: .18em; }
.wx-foot-social { display: flex; gap: 2px; margin: 0 0 0 -10px; padding: 0; list-style: none; }
.wx-foot-social a { display: flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; color: var(--wtr-footer-text); }
.wx-foot-social a:hover { color: var(--wtr-footer-text); background: color-mix(in srgb, var(--wtr-footer-text) 10%, transparent); border-radius: var(--wtr-radius-sm); }
.wx-foot-social .wx-i { inline-size: 20px; block-size: 20px; }
.wx-foot-social .wx-i--x { inline-size: 18px; block-size: 18px; }
/* breaking.css */
.wx .wtr-breaking {
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
min-block-size: 44px;
margin: 0;
padding: 8px var(--wtr-margin);
background: var(--wtr-surface);
border-bottom: 1px solid var(--wtr-border);
color: var(--wtr-heading);
font-family: var(--wtr-ff-sans);
}
.wx .wtr-breaking .wtr-label {
display: inline-flex;
flex: none;
align-items: center;
block-size: 22px;
margin: 0;
padding: 0 7px;
border: 0;
border-radius: var(--wtr-radius-xs);
background: var(--wtr-signal);
color: var(--wtr-signal-text);
font: 800 11.5px/1 var(--wtr-ff-sans);
letter-spacing: .08em;
text-transform: uppercase;
}
.wx .wtr-breaking a {
min-inline-size: 0;
overflow: hidden;
color: var(--wtr-heading);
font: 700 var(--wtr-fs-ui)/1.3 var(--wtr-ff-sans);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.wx .wtr-breaking a:hover { color: var(--wtr-heading); text-decoration: underline; text-underline-offset: .18em; }
/* consent.css */
.wx .cmplz-cookiebanner {
--cmplz_banner_background_color: var(--wtr-surface);
--cmplz_banner_border_color: var(--wtr-border);
--cmplz_banner_border_width: 1px;
--cmplz_banner_border_radius: var(--wtr-radius-md);
--cmplz_text_color: var(--wtr-text);
--cmplz_hyperlink_color: var(--wtr-link);
--cmplz_category_body_always_active_color: var(--wtr-win);
--cmplz_button_accept_background_color: var(--wtr-btn);
--cmplz_button_accept_border_color: var(--wtr-btn);
--cmplz_button_accept_text_color: var(--wtr-btn-text);
--cmplz_button_deny_background_color: var(--wtr-surface);
--cmplz_button_deny_border_color: var(--wtr-control);
--cmplz_button_deny_text_color: var(--wtr-heading);
--cmplz_button_settings_background_color: var(--wtr-surface);
--cmplz_button_settings_border_color: var(--wtr-control);
--cmplz_button_settings_text_color: var(--wtr-heading);
--cmplz_button_border_radius: var(--wtr-radius-sm);
--cmplz_slider_active_color: var(--wtr-btn);
--cmplz_slider_inactive_color: var(--wtr-control);
--cmplz_slider_bullet_color: var(--wtr-surface);
--cmplz_category_open_icon_color: var(--wtr-heading);
--cmplz_title_font_size: 18px;
--cmplz_text_font_size: 15px;
--cmplz_text_line_height: 1.5;
--cmplz_link_font_size: 14px;
--cmplz_button_font_size: 15px;
z-index: var(--wtr-z-consent);
color: var(--wtr-text);
font-family: var(--wtr-ff-sans);
box-shadow: var(--wtr-shadow-3);
}
.wx .cmplz-cookiebanner .cmplz-title { color: var(--wtr-heading); font-weight: 800; }
.wx .cmplz-cookiebanner .cmplz-btn { min-block-size: 44px; font-weight: 600; }
.wx .cmplz-cookiebanner .cmplz-close { min-inline-size: 44px; min-block-size: 44px; }
.wx .cmplz-cookiebanner .cmplz-category { border-radius: var(--wtr-radius-sm); background: var(--wtr-section); }
.wx #cmplz-manage-consent .cmplz-manage-consent { display: none; }
@media (max-width: 1023px) {
.wx .cmplz-cookiebanner { max-block-size: calc(100vh - 120px); overflow-y: auto; }
}
/* utilities.css */
.wx-na { color: var(--wtr-meta); }
.wx-tz { white-space: nowrap; }
.wx-sr-score { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }