/*
 * The /nrl section: the evergreen club, finals and expansion pages, and the
 * page furniture the generated score pages share with them.
 *
 * Built on the tokens in /theme.css, which also owns the reset, the app bar,
 * base typography and the footer. Nothing here declares a colour of its own.
 */

/* An article is a reading measure by default, because most pages in this
   section are prose. Score pages opt out: a ladder or a round is a wide thing
   and squeezing it into a column of text helps nobody. */
article {
    max-width: 820px;
    margin: 0 auto;
}

article.wide {
    max-width: none;
}

article h2 {
    margin: var(--gap-6) 0 var(--gap-3);
    font-size: 1.3rem;
}

article h3 {
    margin: var(--gap-5) 0 var(--gap-2);
}

/* Prose lists only. A component list - the scoring timeline, a lineup, a form
   strip - is a <ul> or <ol> inside <article> too, and the reading indent pushes
   its rows off the panel's leading edge while the item margin breaks the rules
   between them. Component lists are the ones carrying a class. */
article ul:not([class]),
article ol:not([class]) {
    padding-left: 1.35rem;
    margin-bottom: var(--gap-4);
}

article ul:not([class]) > li,
article ol:not([class]) > li {
    margin-bottom: var(--gap-2);
}

/* Prose links only. Every card on a score page - a match, a round chip, a club
   tile - is itself an <a> inside <article>, and an unscoped rule underlines the
   whole card at once on hover. */
article p a:hover,
article li a:hover,
article dd a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------- team hero */

.team-hero {
    display: flex;
    align-items: center;
    gap: var(--gap-4);
    margin-bottom: var(--gap-4);
}

.team-hero h1 {
    margin: 0;
}

/* The artwork is clipped to a circle by a per-page clipPath. An outermost svg
   hides its overflow, so this holds the shape on a page that forgot the defs. */
.team-badge {
    flex-shrink: 0;
    border-radius: 50%;
}

/* ------------------------------------------------------------------- cards */

.answer-card {
    margin: var(--gap-5) 0 var(--gap-6);
    padding: var(--gap-4) var(--gap-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.answer-card h2 {
    margin: 0 0 var(--gap-2);
    font-size: 1.05rem;
}

.answer-card p:last-child,
.callout p:last-child,
.steps-card ol {
    margin-bottom: 0;
}

.steps-card,
.callout {
    margin: var(--gap-5) 0;
    padding: var(--gap-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.callout {
    padding: var(--gap-4) var(--gap-5);
}

.screenshot {
    margin: var(--gap-6) auto;
    text-align: center;
}

.screenshot img {
    max-width: 280px;
    width: 100%;
    height: auto;
    border-radius: var(--r-lg);
}

.screenshot figcaption {
    max-width: 340px;
    margin: var(--gap-3) auto 0;
    font-size: 0.82rem;
    color: var(--text-mute);
}

/* --------------------------------------------------------------- club file */

.club-file {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap-2);
    margin: var(--gap-4) 0;
}

.club-file > div {
    padding: var(--gap-3) var(--gap-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.club-file dt {
    margin-bottom: 0.15rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.club-file dd {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}

/* -------------------------------------------------------------- team grid */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--gap-2);
    margin: var(--gap-4) 0;
}

.team-tile {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    padding: 0.6rem 0.8rem;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text-dim);
    line-height: 1.3;
}

.team-tile:hover {
    background: var(--surface-3);
    border-color: var(--line-2);
    color: var(--text);
}

.team-tile[aria-current] {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
    color: var(--text);
}

/* -------------------------------------------------------------- hub cards */

.hub-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap-2);
    margin: var(--gap-4) 0;
}

.hub-card {
    display: block;
    padding: var(--gap-4) var(--gap-4) var(--gap-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

a.hub-card:hover {
    background: var(--surface-3);
    border-color: var(--line-2);
}

.hub-card h2,
.hub-card h3 {
    margin: 0 0 var(--gap-1);
    color: var(--text);
}

.hub-card h2 { font-size: 1.3rem; }

.hub-card h3 { font-size: 0.98rem; }

.hub-card p {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-mute);
}

.hub-card p.round-byes {
    margin-top: var(--gap-1);
    color: var(--text-dim);
}

/* What a round is doing, on a season index. A finished round says nothing at
   all, so a season does not read as a column of the same word. */
.round-state {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.round-state.is-live {
    color: var(--live);
    font-weight: 650;
}

.round-state.is-current {
    color: var(--brand);
    font-weight: 650;
}

.round-state.is-soon {
    color: var(--text-dim);
}

/* --------------------------------------------------------------- brackets */

.bracket {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-2);
    margin: var(--gap-5) 0 var(--gap-3);
    align-items: start;
}

.bracket-week h3 {
    margin: 0 0 var(--gap-2);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.bracket-tie {
    margin-bottom: var(--gap-2);
    padding: var(--gap-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.bracket-tie .seeds {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--text);
}

.bracket-tie .stage {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--text-mute);
}

.bracket-tie.sudden-death {
    border-color: var(--loss);
}

.bracket-tie.decider {
    background: var(--brand-wash);
    border-color: var(--brand-edge);
}

.bracket-key {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-4);
    margin-bottom: var(--gap-5);
    font-size: 0.8rem;
    color: var(--text-mute);
}

.bracket-key span::before {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border-radius: 3px;
    border: 1px solid var(--line-2);
}

.bracket-key .sudden-death::before {
    border-color: var(--loss);
}

.bracket-key .decider::before {
    border-color: var(--brand-edge);
    background: var(--brand-wash);
}

/* -------------------------------------------------------------------- FAQ */

.faq-item {
    margin-bottom: var(--gap-2);
    padding: 0 var(--gap-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.faq-item summary {
    padding: var(--gap-3) 0;
    list-style: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    float: right;
    font-weight: 400;
    color: var(--text-mute);
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-item p {
    margin: 0 0 var(--gap-4);
    font-size: 0.9rem;
}

/* ------------------------------------------------------- the marketing CTA */

.guide-cta {
    margin: var(--gap-6) 0 var(--gap-5);
    padding: var(--gap-6) var(--gap-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-align: center;
}

.guide-cta h2 {
    margin: 0 0 var(--gap-2);
    font-size: 1.2rem;
}

.guide-cta p {
    max-width: 52ch;
    margin: 0 auto var(--gap-4);
    color: var(--text-dim);
}

.store-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-2);
}

.store-badge img {
    height: 48px;
    width: auto;
    display: block;
}

.google-play-badge img {
    height: 70px;
    margin: -11px -9px;
}

/* --------------------------------------------------------------- related */

.related-links {
    margin-top: var(--gap-6);
    padding-top: var(--gap-5);
    border-top: 1px solid var(--line);
}

.related-links h2 {
    margin: 0 0 var(--gap-3);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.related-links ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--gap-1) var(--gap-4);
    padding: 0;
}

.related-links li {
    margin: 0;
    font-size: 0.9rem;
}

/* A factual page can point to the deeper explanation without becoming the
   explanation itself. This intentionally reads as a resource, not a product
   pitch. */
.guide-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-3) var(--gap-5);
    margin: var(--gap-5) 0;
    padding: var(--gap-4) var(--gap-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.guide-link h2 {
    margin: 0 0 var(--gap-1);
    font-size: 1rem;
}

.guide-link p {
    margin: 0;
    color: var(--text-mute);
    font-size: 0.9rem;
}

.guide-link > a {
    flex: 0 0 auto;
    font-size: 0.9rem;
    font-weight: 700;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 720px) {
    .bracket {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .team-hero {
        gap: var(--gap-3);
    }

    .team-hero .team-badge {
        width: 56px;
        height: 56px;
    }

    .guide-cta {
        padding: var(--gap-5) var(--gap-4);
    }

    .guide-link {
        padding: var(--gap-4);
    }
}