/* Site-wide styles on top of Web Awesome. Prefer Web Awesome tokens (--wa-*) over raw values. */

:root {
    --poo-navy: #0f2a3d;
    --poo-gold: #f5c400;
}

/* The layout switches at 920px, wa-page's mobile-breakpoint in _Layout.cshtml. Media queries rather
   than wa-page's view attribute, so nothing jumps before the components load. */

/* Header: navy in both color schemes, matching the installed app's theme-color. */

wa-page::part(header) {
    background: var(--poo-navy);
    color: #fff;
    border-block-end: none;
}

.site-header {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    width: 100%;
    min-height: 3.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
    color: inherit;
    font-weight: var(--wa-font-weight-bold);
    font-size: var(--wa-font-size-l);
    text-decoration: none;
    white-space: nowrap;
}

.brand img {
    border-radius: var(--wa-border-radius-m);
}

.header-spacer {
    flex: 1;
}

.header-button,
.account-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wa-space-xs);
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--wa-space-2xs);
    border: none;
    border-radius: var(--wa-border-radius-pill);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.header-button:hover,
.account-trigger:hover {
    background: rgb(255 255 255 / 0.1);
}

.header-button wa-icon {
    font-size: 1.35rem;
}

.news-count wa-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.1rem;
    font-size: 0.7rem;
}

.player-avatar {
    --size: 2.25rem;
    background-color: var(--poo-gold);
    color: var(--poo-navy);
}

.account-name,
.account-caret {
    display: none;
}

.account-heading {
    display: flex;
    flex-direction: column;
    padding: var(--wa-space-xs) var(--wa-space-m);
}

.account-group-label {
    margin: 0;
    padding: var(--wa-space-2xs) var(--wa-space-m);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wa-color-text-quiet);
}

/* Week status: a strip under the header on phones, a pill in the header on wider screens. */

.week-chip {
    display: none;
    align-items: center;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-3xs) var(--wa-space-3xs) var(--wa-space-3xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-pill);
    background: rgb(255 255 255 / 0.1);
    font-size: var(--wa-font-size-s);
    white-space: nowrap;
}

.week-chip .week-countdown {
    padding: var(--wa-space-3xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-pill);
    background: var(--poo-gold);
    color: var(--poo-navy);
    font-weight: var(--wa-font-weight-bold);
}

.week-strip {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    width: 100%;
    font-size: var(--wa-font-size-s);
}

.week-strip-icon {
    color: var(--wa-color-brand-on-quiet);
}

.week-strip .week-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.week-strip .week-countdown {
    padding: var(--wa-space-3xs) var(--wa-space-s);
    border-radius: var(--wa-border-radius-pill);
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-weight: var(--wa-font-weight-semibold);
    white-space: nowrap;
}

/* Main menu */

.site-nav {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
}

.nav-filter {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    margin-bottom: var(--wa-space-xs);
    padding-inline: var(--wa-space-s);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-quiet);
}

.nav-filter:focus-within {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
}

.nav-filter input {
    flex: 1;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--wa-color-text-normal);
    /* 16px or more stops iOS Safari zooming in when the field is focused. */
    font-size: max(1rem, 16px);
}

.nav-empty {
    margin: var(--wa-space-xs) var(--wa-space-s);
    color: var(--wa-color-text-quiet);
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-list > li {
    margin: 0;
    padding: 0;
}

.nav-top {
    padding-bottom: var(--wa-space-xs);
    margin-bottom: var(--wa-space-xs);
    border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

/* Reset the native.css styling of <details>: the menu's sections are plain rows. */
.site-nav details,
.pool-news details {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

.site-nav summary,
.pool-news summary {
    list-style: none;
    cursor: pointer;
}

.site-nav summary::-webkit-details-marker,
.pool-news summary::-webkit-details-marker {
    display: none;
}

.site-nav summary::before,
.site-nav summary::after,
.pool-news summary::before,
.pool-news summary::after {
    content: none;
}

.site-nav a,
.site-nav summary {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    /* 44px minimum touch target on phones */
    min-height: 2.75rem;
    margin: 0;
    padding: 0 var(--wa-space-s);
    border-radius: var(--wa-border-radius-m);
    color: inherit;
    text-decoration: none;
}

.nav-group > summary {
    font-weight: var(--wa-font-weight-semibold);
}

.nav-group > summary > wa-icon:first-child {
    color: var(--wa-color-text-quiet);
}

/* Links in a group line up with the group's label, past its icon. */
.nav-group > .nav-list a,
.nav-group > .nav-list summary {
    padding-inline-start: calc(var(--wa-space-s) * 2 + 1.25em);
}

.nav-sub > .nav-list {
    margin-inline-start: calc(var(--wa-space-s) + 1.25em + var(--wa-space-s));
    padding-inline-start: var(--wa-space-2xs);
    border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.nav-sub > .nav-list a {
    padding-inline-start: var(--wa-space-s);
}

.site-nav a:hover,
.site-nav summary:hover {
    background: var(--wa-color-neutral-fill-quiet);
}

.site-nav a[aria-current="page"] {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

.nav-label {
    flex: 1;
}

.nav-count,
.nav-lock,
.nav-chevron {
    color: var(--wa-color-text-quiet);
}

.nav-count {
    font-size: var(--wa-font-size-xs);
}

.nav-chevron {
    font-size: 0.8em;
    transition: rotate var(--wa-transition-fast);
}

details[open] > summary > .nav-chevron {
    rotate: 90deg;
}

.nav-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--wa-color-success-fill-loud);
}

details[open] > summary > .nav-dot {
    display: none;
}

/* Phone tab bar */

.tab-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--wa-color-surface-default);
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 3.75rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--wa-color-text-quiet);
    font: inherit;
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 1.75rem;
    border-radius: var(--wa-border-radius-pill);
    font-size: 1.25rem;
}

.tab[aria-current="page"] {
    color: var(--wa-color-brand-on-quiet);
}

.tab[aria-current="page"] .tab-icon {
    background: var(--wa-color-brand-fill-quiet);
}

/* Pool news */

.pool-news {
    --size: min(26rem, 100vw);
}

.pool-news[placement="bottom"] {
    --size: 85dvh;
}

.pool-news::part(body) {
    padding: 0;
}

.news-section {
    border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border) !important;
}

.news-section > summary {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    min-height: 4rem;
    margin: 0;
    padding: var(--wa-space-xs) var(--wa-space-m);
}

.news-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--wa-border-radius-l);
    font-size: 1.1rem;
}

.news-icon-deadlines {
    background: var(--wa-color-warning-fill-quiet);
    color: var(--wa-color-warning-on-quiet);
}

.news-icon-reminders {
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.news-icon-announcements {
    background: var(--wa-color-danger-fill-quiet);
    color: var(--wa-color-danger-on-quiet);
}

.news-title {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.news-text {
    padding: 0 var(--wa-space-m) var(--wa-space-m) calc(var(--wa-space-m) + 2.25rem + var(--wa-space-s));
    overflow-wrap: anywhere;
}

.news-text > :first-child {
    margin-top: 0;
}

/* The texts are HTML whose line breaks the old site also turns into <br>; skip the ones that
   only follow a closing block tag, which would add a blank line between paragraphs. */
.news-text > :is(p, div, h1, h2, h3, h4, h5, h6, ul, ol, table) + br {
    display: none;
}

/* Page content */

.site-main {
    max-width: 60rem;
    margin-inline: auto;
    padding: var(--wa-space-l) var(--wa-space-m);
    /* Clear the tab bar and the iPhone home indicator. */
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 920px) {
    .week-chip {
        display: inline-flex;
    }

    wa-page::part(subheader) {
        display: none;
    }

    .account-name,
    .account-caret {
        display: inline;
    }

    .account-trigger {
        padding-inline-end: var(--wa-space-s);
    }

    .tab-bar {
        display: none;
    }

    .site-main {
        padding-bottom: max(var(--wa-space-l), env(safe-area-inset-bottom));
    }

    .site-nav a,
    .site-nav summary {
        min-height: 2.25rem;
    }
}

/* Sign-in and other pages on the bare layout */

.bare-main {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--wa-space-xl) var(--wa-space-m);
    padding-bottom: max(var(--wa-space-xl), env(safe-area-inset-bottom));
}

.sign-in {
    width: 100%;
    max-width: 24rem;
}

.sign-in-header {
    text-align: center;
}

.sign-in-header img {
    border-radius: var(--wa-border-radius-l);
}

.sign-in-header h1 {
    margin: 0;
}

.sign-in-field {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}

.sign-in-field input {
    width: 100%;
    /* 16px or more stops iOS Safari zooming in when the field is focused. */
    font-size: max(1rem, 16px);
}

.sign-in-remember {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    min-height: 2.75rem;
}

#sign-in-button {
    width: 100%;
    min-height: 2.75rem;
}

.sign-in-forgot {
    align-self: center;
}

.sign-in-footer {
    text-align: center;
    color: var(--wa-color-text-quiet);
    margin: 0;
}

/* BooSmack */

.smack-title wa-icon {
    color: var(--poo-gold);
}

.smack-subject {
    margin: 0;
    overflow-wrap: anywhere;
}

.smack-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-xs);
}

.smack-filter input[type="search"] {
    flex: 1 1 14rem;
    min-width: 0;
}

.smack-filter select {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.smack-filter input,
.smack-filter select,
.smack-field input,
.smack-field select {
    /* 16px or more stops iOS Safari zooming in when the field is focused. */
    font-size: max(1rem, 16px);
}

.smack-topics {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    background: var(--wa-color-surface-default);
    overflow: hidden;
}

.smack-topics > li {
    margin: 0;
    padding: 0;
}

.smack-topics > li + li {
    border-top: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.smack-topic {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "avatar main tags"
        "avatar counts counts";
    align-items: center;
    column-gap: var(--wa-space-s);
    row-gap: var(--wa-space-3xs);
    padding: var(--wa-space-s) var(--wa-space-m);
    color: inherit;
    text-decoration: none;
}

.smack-topic:hover {
    background: var(--wa-color-neutral-fill-quiet);
}

.smack-topic.is-hidden,
.smack-post.is-hidden .smack-body {
    opacity: 0.6;
}

.smack-topic .smack-avatar {
    grid-area: avatar;
}

.smack-avatar {
    --size: 2.5rem;
    flex-shrink: 0;
}

.smack-topic-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.smack-topic-tags {
    grid-area: tags;
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

.smack-topic-counts {
    grid-area: counts;
    display: flex;
    gap: var(--wa-space-s);
}

.smack-hot {
    color: var(--wa-color-danger-fill-loud);
    font-size: 1.25rem;
}

.smack-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--wa-space-2xs);
}

.smack-pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 var(--wa-space-xs);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    color: inherit;
    text-decoration: none;
}

.smack-pager a[aria-current="page"] {
    border-color: transparent;
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
    font-weight: var(--wa-font-weight-bold);
}

.smack-post {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
    padding: var(--wa-space-m);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    background: var(--wa-color-surface-default);
    /* Linked to from emails and after posting; clear the sticky header. */
    scroll-margin-top: 5rem;
}

.smack-post.is-topic {
    border-top: 0.25rem solid var(--poo-navy);
}

.smack-post-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-s);
}

.smack-post-author {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.smack-post-when {
    white-space: nowrap;
}

/* The post itself: HTML written by players, with whatever colors they chose, on a light
   background in both color schemes (the wa-light class on the element). */
.smack-body {
    padding: var(--wa-space-m);
    border-radius: var(--wa-border-radius-m);
    background: #fff;
    color: #1b1b1b;
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.smack-body > :first-child {
    margin-top: 0;
}

.smack-body > :last-child {
    margin-bottom: 0;
}

.smack-body img,
.smack-attachments img {
    max-width: 100%;
    height: auto;
}

.smack-body mark {
    background: var(--poo-gold);
    color: var(--poo-navy);
}

.smack-attachments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-s);
}

.smack-attachments img {
    max-width: 200px;
    max-height: 150px;
    border-radius: var(--wa-border-radius-s);
}

.smack-file {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    min-height: 2.75rem;
    padding: 0 var(--wa-space-s);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
}

/* An icon in front of a button's or link's words. */
.site-main button > wa-icon:first-child,
.site-main a > wa-icon:first-child {
    margin-inline-end: 0.35em;
}

.smack-post-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--wa-space-m);
    font-size: var(--wa-font-size-s);
}

.smack-post-actions form {
    margin: 0;
}

/* A button that reads as a link, for the one-click actions under a post. */
.smack-link {
    min-height: 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--wa-color-text-link);
    font: inherit;
    cursor: pointer;
}

.smack-link:hover {
    text-decoration: underline;
}

.smack-report {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.smack-report > summary {
    display: inline;
    padding: 0;
    color: var(--wa-color-text-link);
    list-style: none;
    cursor: pointer;
}

.smack-report > summary::-webkit-details-marker {
    display: none;
}

.smack-report > summary::before,
.smack-report > summary::after {
    content: none;
}

.smack-report[open] > form {
    margin-top: var(--wa-space-xs);
}

.smack-field {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    margin: 0;
    padding: 0;
    border: none;
}

.smack-field input[type="text"],
.smack-field select {
    width: 100%;
}

.smack-editor {
    width: 100%;
}

.smack-import {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    padding: var(--wa-space-s);
    border: var(--wa-border-width-s) dashed var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
}

.smack-import-status {
    margin: 0;
}

.smack-excerpt {
    margin: var(--wa-space-2xs) 0 0;
    color: var(--wa-color-text-quiet);
    overflow-wrap: anywhere;
}

.smack-suspended {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.smack-suspended > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-s);
    margin: 0;
}

.smack-suspended form {
    margin: 0;
}

@media (min-width: 640px) {
    .smack-topic {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "avatar main tags counts";
    }

    .smack-topic-counts {
        flex-direction: column;
        gap: 0;
        min-width: 6.5rem;
        text-align: right;
    }
}

.week-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--wa-space-m);
    margin: 0;
}

.week-facts dt {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.week-facts dd {
    margin: 0;
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
}

/* --- Admin: Logging ------------------------------------------------------------------------- */

#logging-tabs wa-tab-panel {
    padding-block: var(--wa-space-m);
}

.log-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--wa-space-s);
}

.log-field {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: var(--wa-space-3xs);
    max-width: 100%;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

/* Web Awesome's native styles make fields and labels holding them full width; these sit side by side. */
.log-filters .log-field {
    width: auto;
}

.log-filters .log-field :is(input, select) {
    width: auto;
    max-width: 100%;
    /* 16px or more stops iOS Safari zooming in when the field is focused. */
    font-size: max(1rem, 16px);
}

.log-levels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs) var(--wa-space-m);
    margin: 0;
    padding: 0;
    border: 0;
}

.log-levels legend {
    float: left;
    padding: 0;
    margin-inline-end: var(--wa-space-xs);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

/* Wide grids scroll sideways inside their own box, never the page. */
.log-table {
    max-width: 100%;
    overflow-x: auto;
}

.log-table table {
    width: 100%;
    font-size: var(--wa-font-size-s);
}

.log-table table.log-narrow {
    width: auto;
}

.log-table td {
    vertical-align: top;
}

.log-time {
    white-space: nowrap;
}

.log-number {
    text-align: end;
    white-space: nowrap;
}

/* --- Picks: the action sheet and bet changes ------------------------------------------------ */

.sheet-status {
    padding: var(--wa-space-m);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
}

.sheet-head {
    flex-wrap: wrap;
    gap: var(--wa-space-xs) var(--wa-space-m);
}

/* A pick and its bet share a line where there's room, and stack on a phone. */
.pick-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-xs) var(--wa-space-s);
}

.pick-group > fieldset {
    flex: 1 1 15rem;
}

.sheet-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-s);
}

.sheet-section {
    padding-block-start: var(--wa-space-l);
    border-block-start: 1px solid var(--wa-color-surface-border);
}

.pick-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: var(--wa-space-m);
}

.pick-card {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
    padding: var(--wa-space-m);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    background: var(--wa-color-surface-raised);
}

.pick-card.pick-locked {
    background: var(--wa-color-surface-lowered);
}

.pick-when {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-xs);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

/* Web Awesome's native fieldset has a border and padding; these are plain rows. */
.pick-card fieldset.pick-row {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.pick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-xs) var(--wa-space-s);
}

.pick-at {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

/* A team is one big tap target: its radio is hidden and the chosen one is outlined. */
.pick-card label.pick-team,
.pick-card label.pick-choice {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-xs) var(--wa-space-s);
    border: 2px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    cursor: pointer;
}

.pick-card span.pick-team {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

.pick-team {
    flex: 1 1 7rem;
}

.pick-team input,
.pick-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pick-team:has(input:checked),
.pick-choice:has(input:checked) {
    border-color: var(--wa-color-brand-border-loud);
    background: var(--wa-color-brand-fill-quiet);
}

.pick-team:has(input:focus-visible),
.pick-choice:has(input:focus-visible) {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
}

fieldset:disabled .pick-team,
fieldset:disabled .pick-choice {
    cursor: default;
    opacity: 0.75;
}

.pick-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pick-line {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.pick-card label.pick-none {
    display: inline-flex;
    width: auto;
    align-items: center;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.pick-ou-number {
    flex: 0 0 auto;
    min-width: 4.5rem;
}

.pick-card label.pick-bet {
    display: flex;
    width: auto;
    align-items: center;
    gap: var(--wa-space-xs);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.pick-card .pick-bet input {
    width: 8rem;
    /* 16px or more stops iOS Safari zooming in when the field is focused. */
    font-size: max(1rem, 16px);
    text-align: end;
}

.pick-bet input[readonly] {
    background: transparent;
    border-style: dashed;
}

.pick-more {
    align-self: flex-start;
    font-size: var(--wa-font-size-s);
}

/* The Print (PDF) links on the action sheet and My Weekly Results. */
.sheet-print {
    margin: 0;
    font-size: var(--wa-font-size-s);
}

.results-print {
    align-self: center;
    font-size: var(--wa-font-size-s);
}

/* The team match-up (Picks/Matchup), in the shared dialog or as a page: the two teams side by side. */
.matchup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wa-font-size-s);
}

.matchup-table :is(th, td) {
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    text-align: center;
}

.matchup-table tbody th[scope="row"] {
    text-align: start;
    font-weight: var(--wa-font-weight-normal);
    color: var(--wa-color-text-quiet);
}

.matchup-table tbody td {
    font-variant-numeric: tabular-nums;
    font-weight: var(--wa-font-weight-semibold);
}

.matchup-team {
    width: 40%;
    vertical-align: bottom;
}

.matchup-team img {
    display: block;
    margin-inline: auto;
}

.matchup-name {
    display: block;
    font-weight: var(--wa-font-weight-semibold);
}

.matchup-section th {
    padding-top: var(--wa-space-s);
    border-bottom: 1px solid var(--wa-color-surface-border);
    text-align: start;
    font-size: var(--wa-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wa-color-text-quiet);
}

.change-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-xs);
}

.change-row > span:first-child {
    display: flex;
    flex-direction: column;
}

.survivor-card {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
}

.survivor-card select {
    width: auto;
    max-width: 100%;
    font-size: max(1rem, 16px);
}

/* --- Admin: Score API ----------------------------------------------------------------------- */

.score-facts {
    display: grid;
    gap: var(--wa-space-xs);
    margin: 0;
}

.score-facts div {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: var(--wa-space-s);
}

.score-facts dt {
    color: var(--wa-color-text-quiet);
}

.score-facts dd {
    margin: 0;
}

.score-error {
    color: var(--wa-color-danger-on-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

/* Messages keep their line breaks (stack traces) and wrap long words such as server names. */
.log-message {
    min-width: 16rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- Settings, Profile, Friends & Teams, and the admin's Players page ----------------------- */

.info-tabs wa-tab-panel {
    padding-block: var(--wa-space-m);
}

/* Two forms side by side where there's room, one under the other on a phone. */
.info-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--wa-space-xl);
    align-items: start;
}

.info-form {
    min-width: 0;
}

.info-form :is(input, select, textarea) {
    box-sizing: border-box;
    max-width: 100%;
    /* 16px or more stops iOS Safari zooming in when the field is focused. */
    font-size: max(1rem, 16px);
}

.info-form input[readonly] {
    color: var(--wa-color-text-quiet);
    background: var(--wa-color-surface-lowered);
}

/* A tick box and its words on one line: Web Awesome's native labels stack them. */
.info-form label.info-check,
.info-radios label,
.tick-list label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--wa-space-xs);
    width: auto;
}

.info-form label.info-check input,
.info-radios label input,
.tick-list label input {
    flex: none;
}

.info-form fieldset.info-radios {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-xs) var(--wa-space-l);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.info-radios legend {
    padding: 0;
    margin-bottom: var(--wa-space-2xs);
}

.info-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-s);
    padding-block: var(--wa-space-2xs);
    border-bottom: 1px solid var(--wa-color-surface-border);
    overflow-wrap: anywhere;
}

/* Pictures are 200 x 175 with a transparent surround; keep them on a light ground in both schemes. */
.info-photo {
    width: 200px;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: #fff;
}

/* The players to tick scroll in their own box, in as many columns as fit. */
.tick-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0 var(--wa-space-m);
    max-height: 26rem;
    margin: 0;
    padding: var(--wa-space-xs) var(--wa-space-s);
    overflow-y: auto;
    list-style: none;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
}

.tick-list label {
    min-height: 2.5rem;
    cursor: pointer;
}

.tick-list small {
    color: var(--wa-color-text-quiet);
}

/* --- Picks: the weekly action summary ------------------------------------------------------- */

.summary-filters {
    align-items: center;
}

.summary-filters label.summary-check {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    width: auto;
}

/* A card per player, as many across as fit. */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--wa-space-m);
    align-items: start;
}

.summary-card {
    padding: var(--wa-space-s);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
    /* Off-screen cards aren't laid out until scrolled to: there's one per player. */
    content-visibility: auto;
    contain-intrinsic-size: auto 30rem;
}

.summary-card[hidden] {
    display: none;
}

.summary-card.summary-mine {
    border-color: var(--wa-color-brand-border-loud);
}

.summary-card h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-xs);
    margin: 0 0 var(--wa-space-xs);
    font-size: var(--wa-font-size-m);
    overflow-wrap: anywhere;
}

.summary-card table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--wa-font-size-s);
    font-variant-numeric: tabular-nums;
}

.summary-card :is(th, td) {
    padding: var(--wa-space-3xs) var(--wa-space-2xs);
    border: 0;
    text-align: start;
    white-space: nowrap;
}

.summary-card th {
    color: var(--wa-color-text-quiet);
    font-weight: var(--wa-font-weight-normal);
}

.summary-card .num {
    text-align: end;
}

.summary-team {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-3xs);
    padding: 1px var(--wa-space-2xs);
    border: 1px solid transparent;
    border-radius: var(--wa-border-radius-m);
    color: var(--wa-color-text-quiet);
}

/* The side the player took. */
.summary-team.summary-chosen {
    border-color: var(--wa-color-success-border-loud);
    background: var(--wa-color-success-fill-quiet);
    color: var(--wa-color-success-on-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

/* --- Results: my weekly results ------------------------------------------------------------- */

/* The table scrolls sideways on its own on a narrow phone, not the page. */
.results-scroll {
    overflow-x: auto;
}

.results-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--wa-font-size-s);
    font-variant-numeric: tabular-nums;
}

.results-table :is(th, td) {
    padding: var(--wa-space-2xs);
    border: 0;
    border-bottom: 1px solid var(--wa-color-surface-border);
    text-align: start;
    white-space: nowrap;
}

.results-table thead th {
    color: var(--wa-color-text-quiet);
    font-weight: var(--wa-font-weight-normal);
}

.results-table tfoot th {
    border-bottom: 0;
}

.results-table .num {
    text-align: end;
}

.results-when,
.results-quiet {
    color: var(--wa-color-text-quiet);
}

.results-negative {
    color: var(--wa-color-danger-on-quiet);
}

/* A team, or an over or under; coloured by how the pick came out when it was the one picked. */
.results-team {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    padding: 1px var(--wa-space-2xs);
    border: 1px solid transparent;
    border-radius: var(--wa-border-radius-m);
    width: max-content;
}

/* Sized here so the row is laid out right before the icon component has loaded. */
.results-team > :is(img, wa-icon) {
    flex: none;
}

.results-team > wa-icon {
    inline-size: 1em;
}

.results-team.results-win {
    border-color: var(--wa-color-success-border-loud);
    background: var(--wa-color-success-fill-quiet);
    color: var(--wa-color-success-on-quiet);
}

.results-team.results-loss {
    border-color: var(--wa-color-danger-border-loud);
    background: var(--wa-color-danger-fill-quiet);
    color: var(--wa-color-danger-on-quiet);
}

.results-team.results-push {
    border-color: var(--wa-color-warning-border-loud);
    background: var(--wa-color-warning-fill-quiet);
    color: var(--wa-color-warning-on-quiet);
}

.results-team.results-pending {
    border-color: var(--wa-color-neutral-border-loud);
    background: var(--wa-color-neutral-fill-quiet);
}

.results-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: var(--wa-space-m);
    align-items: start;
}

.results-card {
    padding: var(--wa-space-s);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-l);
}

.results-card h2 {
    margin: 0 0 var(--wa-space-xs);
    font-size: var(--wa-font-size-m);
}

.results-card p {
    margin: 0 0 var(--wa-space-2xs);
}

.results-matchup,
.results-choice,
.results-verdict {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

.results-matchup {
    color: var(--wa-color-text-quiet);
}

.results-verdict {
    font-weight: var(--wa-font-weight-semibold);
}

.results-verdict.results-win {
    color: var(--wa-color-success-on-quiet);
}

.results-verdict.results-loss {
    color: var(--wa-color-danger-on-quiet);
}

.results-verdict.results-push {
    color: var(--wa-color-warning-on-quiet);
}

.results-verdict.results-pending {
    color: var(--wa-color-text-quiet);
}

.results-byes {
    display: grid;
    gap: var(--wa-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wa-font-size-s);
}

.results-byes li {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
}

/* --- Player bio: the dialog opened from a player's name ------------------------------------- */

/* A player's name reads as the text around it; the underline says it opens something. */
a.player-link {
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

a.player-link:hover {
    color: var(--wa-color-text-link);
}

.player-bio {
    --width: 34rem;
}

.player-bio-page {
    max-width: 34rem;
}

.bio {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
}

.bio-top {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-m);
    align-items: flex-start;
}

.bio-photo {
    flex: none;
    width: 100px;
    height: auto;
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: #fff;
}

.bio-no-photo {
    display: grid;
    place-items: center;
    height: 88px;
    background: var(--wa-color-surface-lowered);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xl);
}

.bio-facts {
    display: grid;
    flex: 1 1 14rem;
    gap: var(--wa-space-2xs);
    margin: 0;
}

.bio-facts div {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--wa-space-s);
}

.bio-facts dt {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

.bio-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.bio h3 {
    margin: 0 0 var(--wa-space-2xs);
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

.bio p {
    margin: 0;
}

/* Bios keep the line breaks they were typed with. */
.bio-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.bio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs) var(--wa-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bio-chips li {
    padding: 1px var(--wa-space-xs);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-pill);
    font-size: var(--wa-font-size-s);
}

/* --- Contest standings ---------------------------------------------------------------------- */

/* The reader's own row, their friends' and Coin Flip Guy's, as the old pages coloured them. */
.standings-me {
    background: var(--wa-color-brand-fill-quiet);
}

.standings-friend {
    background: var(--wa-color-success-fill-quiet);
}

.standings-cfg {
    background: var(--wa-color-warning-fill-quiet);
}

.standings-table tr.standings-me td {
    font-weight: var(--wa-font-weight-semibold);
}

.standings-rookie,
.standings-rookie a {
    color: var(--wa-color-brand-on-quiet);
}

.standings-rank {
    white-space: nowrap;
}

.standings-move {
    margin-inline-start: var(--wa-space-3xs);
    font-size: 0.8em;
}

.standings-up {
    color: var(--wa-color-success-on-quiet);
}

.standings-down {
    color: var(--wa-color-danger-on-quiet);
}

.standings-same {
    color: var(--wa-color-text-quiet);
}

.standings-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-xs) var(--wa-space-m);
    margin: 0;
}

.standings-swatch {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-end: var(--wa-space-2xs);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    vertical-align: -0.15em;
}

/* Sure Thing: a column a week, each cell the pick and the game, marked right, push or wrong. */
.surething-table .surething-week {
    text-align: center;
}

.surething-cell {
    min-width: 5.5rem;
    text-align: center;
    font-size: var(--wa-font-size-2xs);
    line-height: 1.25;
}

.surething-cell .surething-pick,
.surething-cell .surething-game {
    display: block;
    white-space: nowrap;
}

.surething-cell .surething-game {
    color: var(--wa-color-text-quiet);
}

.surething-mark {
    font-size: var(--wa-font-size-s);
}

.surething-win .surething-mark {
    color: var(--wa-color-success-on-quiet);
}

.surething-push .surething-mark {
    color: var(--wa-color-text-quiet);
}

.surething-loss .surething-mark {
    color: var(--wa-color-danger-on-quiet);
}

/* Survivor and Born to Lose: the picked team's logo, marked in or out, and the week's counts. */
.survivor-table .survivor-week {
    text-align: center;
}

.survivor-count :is(th, td) {
    background: var(--wa-color-neutral-fill-quiet);
    font-weight: var(--wa-font-weight-semibold);
}

.survivor-cell {
    min-width: 3.25rem;
    text-align: center;
    white-space: nowrap;
}

.survivor-logo {
    height: 1.75rem;
    width: auto;
    vertical-align: middle;
}

.survivor-mark {
    vertical-align: middle;
    font-size: var(--wa-font-size-s);
}

.survivor-survived .survivor-mark {
    color: var(--wa-color-success-on-quiet);
}

.survivor-out .survivor-mark {
    color: var(--wa-color-danger-on-quiet);
}

.survivor-payouts {
    margin: 0;
    padding-inline-start: var(--wa-space-l);
}

/* Legacy: the three seniority circles side by side where they fit. */
.legacy-circles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--wa-space-l);
    align-items: start;
}

/* --- Home: status box and leader lists ----------------------------------------------------- */

.home-logo {
    display: block;
    height: 2.5rem;
    width: auto;
}

.home-alive {
    color: var(--wa-color-success-on-quiet);
}

.home-out {
    color: var(--wa-color-danger-on-quiet);
}

.home-lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--wa-space-m);
    align-items: start;
}

.home-list-title {
    font-weight: var(--wa-font-weight-semibold);
}

.home-list-halves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--wa-space-s);
}

.home-list-halves h3 {
    margin: 0 0 var(--wa-space-2xs);
}

.home-list-lines {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wa-font-size-s);
}

.home-list-lines li {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-2xs);
}

.home-list-name {
    min-width: 0;
    padding-inline: var(--wa-space-3xs);
    border-radius: var(--wa-border-radius-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--wa-space-m);
    align-items: start;
}

.home-featured {
    grid-column: 1 / -1;
}

.home-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wa-font-size-s);
    font-variant-numeric: tabular-nums;
}

.home-table th,
.home-table td {
    padding: var(--wa-space-3xs) var(--wa-space-2xs);
    text-align: start;
}

.home-table thead th {
    color: var(--wa-color-text-quiet);
    font-weight: var(--wa-font-weight-semibold);
    border-block-end: 1px solid var(--wa-color-surface-border);
}

.home-table tfoot :is(th, td) {
    font-weight: var(--wa-font-weight-semibold);
    border-block-start: 1px solid var(--wa-color-surface-border);
}

.home-table .num {
    text-align: end;
}

.home-team {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
}

.home-team img {
    flex: none;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.home-divisions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--wa-space-m) var(--wa-space-l);
    align-items: start;
}

/* --- Results: Weekly Winner, Weekly Paid Contests ------------------------------------------ */

.winners-groups,
.paid-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--wa-space-m);
    align-items: start;
}

.winners-groups tr.winners-first:not(:first-child) td {
    border-block-start: 1px solid var(--wa-color-surface-border);
}

.paid-pick {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
}

.paid-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
}

/* --- Results: Monday Morning QB ------------------------------------------------------------- */

.qb-games {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--wa-space-m);
    align-items: start;
}

.qb-game-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wa-space-xs);
    font-weight: var(--wa-font-weight-semibold);
}

.qb-game-head wa-format-date {
    margin-inline-start: auto;
    font-weight: var(--wa-font-weight-normal);
}

.qb-choice {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs) var(--wa-space-m);
    margin: 0 0 var(--wa-space-s);
    padding: 0;
    border: 0;
}

.qb-choice legend {
    margin-block-end: var(--wa-space-2xs);
    padding: 0;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.qb-choice label {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    cursor: pointer;
}

.qb-place {
    white-space: nowrap;
}

.qb-note {
    display: block;
    font-size: var(--wa-font-size-xs);
    color: var(--wa-color-text-quiet);
}

/* The active poll: one bar per answer, most votes first, its length the answer's share of the votes. */
.poll-bars {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.poll-bars li {
    margin: 0;
    padding: 0;
}

.poll-bar-label {
    display: flex;
    justify-content: space-between;
    gap: var(--wa-space-s);
    margin-block-end: var(--wa-space-3xs);
    font-size: var(--wa-font-size-s);
}

.poll-bar-value {
    flex: none;
    color: var(--wa-color-text-quiet);
    font-variant-numeric: tabular-nums;
}

.poll-bar-lane {
    block-size: 12px;
}

.poll-bar {
    block-size: 100%;
    background: var(--wa-color-brand-fill-loud);
    border-radius: 0 4px 4px 0;
}

.home-list-jump {
    font-variant-numeric: tabular-nums;
    color: var(--wa-color-text-quiet);
}