/* Shared by the two app pages — /organizer and /players, EN and ES.
 *
 * This repo has no partials and no build step, so page chrome is normally
 * duplicated inline. Four copies of it (two pages x two languages) is where
 * that stops being worth it, which is the same reasoning that produced
 * legal.css. The tokens below are the same ones index.html declares inline;
 * they are repeated here rather than shared because there is nowhere to share
 * them from. Keep them in step with index.html:63-81.
 *
 * Cache: this file falls under firebase.json's 7-day wildcard rule, so bump
 * the ?v= in ALL FOUR pages that link it whenever it changes. */
:root {
    --paper: #F4F5F2;
    --card: #FFFFFF;
    --ink: #16233B;
    --ink-soft: #5A6580;
    --teal: #21B4C7;
    --lime: #8CC63E;
    --orange: #F1531F;
    --blue: #1E77BC;
    --line: rgba(22, 35, 59, 0.12);
    --line-strong: rgba(22, 35, 59, 0.22);
    --shadow: 0 24px 60px -28px rgba(22, 35, 59, 0.45);
    --display: "Archivo", system-ui, sans-serif;
    --body: "Archivo", system-ui, -apple-system, sans-serif;
    --mono: "Space Mono", ui-monospace, "SF Mono", monospace;
    --edge: clamp(20px, 5vw, 72px);
    --maxw: 1200px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    color: inherit;
}

::selection {
    background: var(--lime);
    color: var(--ink);
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- Shared layout ---- */
.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--edge);
}

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: block;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 3px;
    background: var(--orange);
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    position: relative;
    top: -2px;
}

h1,
h2,
h3 {
    font-family: var(--display);
    font-weight: 800;
    font-stretch: 125%;
    letter-spacing: -0.01em;
    line-height: 1.02;
    margin: 0;
    overflow-wrap: break-word;
}

.brand b {
    font-stretch: 125%;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    padding: 15px 26px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.btn-primary {
    background: var(--ink);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -14px rgba(22,35,59,0.6);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}

.btn-ghost:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

/* ---- Header ---- */
header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: block;
}

.brand b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a:not(.btn) {
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-soft);
    transition: color 0.15s;
    white-space: nowrap;
}

.nav-links a:not(.btn):hover {
    color: var(--ink);
}

.nav-links a.btn {
    text-decoration: none;
}

.nav-links a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.nav .btn {
    padding: 10px 20px;
    font-size: 15px;
}

/* ---- Section scaffolding ---- */
section {
    position: relative;
    scroll-margin-top: 96px;
}

.band {
    padding-block: clamp(64px, 9vw, 120px);
}

.sec-head {
    max-width: 100%;
    margin-bottom: clamp(36px, 5vw, 60px);
}

.sec-head h2 {
    font-size: clamp(30px, 4.4vw, 52px);
    margin-top: 18px;
    text-wrap: balance;
}

.sec-head p {
    color: var(--ink-soft);
    font-size: 18px;
    margin: 16px 0 0;
}

/* ---- App hero ---- */
.app-hero {
    padding-top: clamp(44px, 6vw, 84px);
    padding-bottom: clamp(48px, 7vw, 92px);
}

.app-hero h1 {
    font-size: clamp(34px, 5.6vw, 68px);
    margin-top: 20px;
    max-width: 16ch;
}

.app-hero h1 .hl {
    color: var(--blue);
}

.app-hero p.lead {
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--ink-soft);
    max-width: 52ch;
    margin: 22px 0 32px;
}

.app-hero .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.app-hero .hero-note {
    margin-top: 20px;
    font-family: var(--mono);
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.app-hero .hero-note b {
    color: var(--lime);
}

/* ---- Highlights: alternating screenshot + copy ---- */
.hl-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-block: clamp(38px, 5vw, 64px);
    border-top: 1px solid var(--line);
}

/* Equal columns, with .phone capping the image width — that keeps the
   alternation trivial instead of needing two different column ratios. Document
   order is copy-then-shot, which is what a phone should get; on wide screens
   every other row pulls the shot to the left. */
.hl-row:has(.hl-shot) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hl-row:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.hl-row:nth-child(odd):has(.hl-shot) .hl-shot {
    order: -1;
}

.hl-copy .tag {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-block;
    padding-left: 12px;
    border-left: 4px solid var(--fc, var(--teal));
    margin-bottom: 16px;
}

.hl-row:nth-child(4n+1) {
    --fc: var(--teal);
}

.hl-row:nth-child(4n+2) {
    --fc: var(--lime);
}

.hl-row:nth-child(4n+3) {
    --fc: var(--orange);
}

.hl-row:nth-child(4n+4) {
    --fc: var(--blue);
}

.hl-copy h3 {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.hl-copy {
    max-width: 62ch;
}

.hl-row:has(.hl-shot) .hl-copy {
    max-width: none;
}

.hl-copy p {
    color: var(--ink-soft);
    font-size: 16.5px;
    margin: 14px 0 0;
    max-width: 46ch;
}

.hl-copy ul {
    margin: 18px 0 0;
    padding-left: 20px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

.hl-copy li {
    margin-bottom: 7px;
}

.hl-copy li::marker {
    color: var(--fc, var(--teal));
}

/* Phone frame drawn in CSS, so the captures stay small and re-capturable. */
.hl-shot {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* The frame is CSS, not baked into the capture: it keeps the files small, lets
   a re-capture drop straight in, and inherits --ink so it stays on-brand. */
.phone {
    display: block;
    width: 100%;
    max-width: 292px;
    height: auto;
    border-radius: 34px;
    border: 8px solid var(--ink);
    background: var(--ink);
    box-shadow: var(--shadow);
}

@media (max-width: 860px) {
    .hl-row:has(.hl-shot) {
        grid-template-columns: 1fr;
    }

    /* Copy first on a phone: a 1957px-tall image above the text would push every
     word below the fold. */
    .hl-row:has(.hl-shot) .hl-shot {
        order: 0;
        margin-top: 26px;
    }
}

/* ---- Formats (dark band) ---- */
.formats-band {
    background: var(--ink);
    color: #fff;
}

.formats-band .sec-head p {
    color: rgba(255,255,255,0.66);
}

.formats-band .eyebrow {
    color: rgba(255,255,255,0.6);
}

.fmt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.fmt {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    padding: 30px;
}

.fmt svg {
    width: 100%;
    height: 108px;
    margin-bottom: 22px;
}

.fmt h3 {
    font-size: 20px;
    font-weight: 700;
}

.fmt p {
    color: rgba(255,255,255,0.66);
    font-size: 14.5px;
    margin: 10px 0 0;
}

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

@media (max-width: 620px) {
    .fmt-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- The complete feature list ---- */
.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: center;
    margin-bottom: clamp(30px, 4vw, 46px);
    font-size: 14.5px;
    color: var(--ink-soft);
}

.cat {
    border-top: 3px solid var(--ink);
    padding-top: 20px;
    margin-top: 44px;
}

.cat:first-of-type {
    margin-top: 0;
}

.cat > h3 {
    font-size: 21px;
    font-weight: 700;
}

/* One row per feature, with a single binary column on the right: a tick when
   it is included, "Pro" when it needs a plan. It was a two-column grid of
   cards with status chips scattered through it, which made the one thing a
   reader is actually scanning for — is this included? — the hardest thing to
   see. Beta and Pilot chips are gone because those features are in production;
   Planned rows are gone because they are not built. */
.cat ul {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.cat li {
    background: var(--paper);
    padding: 12px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px;
    gap: 16px;
    align-items: center;
}

/* Name and description run as ONE line and wrap only when they have to. The
   name stays bold and the description stays muted, so the two are still
   distinguishable without costing a line break per row. */
.cat li .f-text {
    font-size: 15px;
    line-height: 1.5;
}

.cat li .f-text b {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.005em;
}

.cat li .f-text span {
    color: var(--ink-soft);
    margin-left: 8px;
}

.f-tier {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lime);
}

.f-tier svg {
    display: block;
}

.f-tier.is-pro {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 3px 7px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .cat li {
        padding: 11px 14px;
        grid-template-columns: minmax(0, 1fr) 54px;
        gap: 10px;
    }

    .cat li .f-text {
        font-size: 14.5px;
    }
}

/* Legend samples reuse the row's own vocabulary rather than a second one. */
.legend .f-tier {
    justify-self: auto;
    margin-right: 7px;
}

/* ---- Free vs Pro comparison ---- */
.cmp-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.cmp {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
}

table.cmp caption {
    caption-side: top;
    text-align: left;
    color: var(--ink-soft);
    font-size: 15px;
    padding-bottom: 16px;
}

table.cmp th,
table.cmp td {
    padding: 13px 16px;
    border-top: 1px solid var(--line);
    text-align: left;
}

table.cmp thead th {
    border-top: 0;
}

table.cmp thead th:not(:first-child),
table.cmp tbody td {
    text-align: center;
}

table.cmp col.c-feature {
    width: 56%;
}

table.cmp col.c-tier {
    width: 22%;
}

table.cmp thead th {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-block: 18px;
}

table.cmp thead th.pro {
    color: var(--blue);
}


table.cmp tbody th {
    font-weight: 500;
    font-size: 15.5px;
    font-family: var(--body);
    letter-spacing: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

table.cmp tbody tr:nth-child(odd) td,
table.cmp tbody tr:nth-child(odd) th {
    background: color-mix(in srgb, var(--paper) 55%, var(--card));
}

table.cmp .lim {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 700;
}

/* The real ceiling on a draw, stated beside the format it belongs to.
   "No limit" in the Pro column is true of events and categories; it was
   never true of a single draw. */
table.cmp .cap {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--ink-soft);
    white-space: nowrap;
}

table.cmp .yes {
    color: var(--lime);
}

table.cmp .no {
    color: var(--line-strong);
}

table.cmp svg {
    display: inline-block;
    vertical-align: middle;
}

.cmp-foot {
    color: var(--ink-soft);
    font-size: 14.5px;
    margin: 20px 0 0;
    max-width: 60ch;
}

@media (max-width: 560px) {
    table.cmp th,
    table.cmp td {
        padding: 11px 9px;
    }

    table.cmp tbody th {
        font-size: 14.5px;
    }

    table.cmp col.c-feature {
        width: 52%;
    }

    table.cmp col.c-tier {
        width: 24%;
    }
}

/* ---- CTA ---- */
.cta-band {
    text-align: center;
}

.cta-band h2 {
    font-size: clamp(32px, 5.2vw, 62px);
    max-width: 17ch;
    margin-inline: auto;
}

.cta-band p {
    color: var(--ink-soft);
    font-size: 18px;
    margin: 20px auto 34px;
    max-width: 46ch;
}

.cta-band .hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
}

/* Inline "go" link. Also declared in index.html's inline stylesheet for the
   home-page fork cards — keep the two in step. */
.fork-go {
    display: inline-block;
    margin-top: 4px;
    font-weight: 600;
    font-size: 15px;
    color: var(--blue);
    text-decoration: none;
}

.fork-go::after {
    content: " →";
}

.fork-go:hover {
    text-decoration: underline;
}

/* ---- Store badges ---- */
.store-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    transition: transform 0.18s ease;
}

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

.store-badge:hover {
    transform: translateY(-2px);
}

/* ---- Footer ---- */
footer {
    border-top: 1px solid var(--line);
    padding-block: 44px;
}

.foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}

.foot .brand b {
    font-size: 16px;
}

.foot .meta {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
}

.foot-links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.foot-links a {
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    transition: color 0.15s;
}

.foot-links a:hover {
    color: var(--ink);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: color 0.15s;
}

.nav-icon:hover {
    color: var(--ink);
}

.nav-icon svg {
    display: block;
}

.nav-icon-label {
    display: none;
}

/* ---- Language switcher (EN | ES) ---- */
.lang-switch {
    position: relative;
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 12.5px;
    letter-spacing: 0.04em;
}

/* A <details> disclosure, not a scripted menu: this repo has no build step and
   most pages load no JavaScript at all. Keyboard and screen-reader behaviour
   come for free. It stays open until the trigger is clicked again — the price
   of not shipping a script to fourteen pages that currently have none. */
.lang-menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink-soft);
    padding: 3px 2px;
    transition: color .15s;
}

.lang-menu > summary::-webkit-details-marker {
    display: none;
}

.lang-menu > summary::after {
    content: "\25be";
    font-size: 9px;
    line-height: 1;
}

.lang-menu[open] > summary::after {
    content: "\25b4";
}

.lang-menu > summary:hover,
.lang-menu[open] > summary {
    color: var(--ink);
}

.lang-list {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 60;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 36px -20px rgba(22, 35, 59, 0.55);
    min-width: 128px;
    padding: 5px;
    display: grid;
    gap: 2px;
}

.lang-list a,
.lang-list .on {
    display: block;
    padding: 7px 10px;
    border-radius: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.lang-list a {
    color: var(--ink-soft);
}

.lang-list a:hover {
    background: var(--paper);
    color: var(--ink);
}

.lang-list .on {
    color: var(--ink);
    font-weight: 700;
    background: var(--paper);
}

/* In a footer there is nothing below to open into, so flip the menu up.
   Legal and support pages put the switcher in .foot-links. */
.foot-links .lang-list {
    top: auto;
    bottom: calc(100% + 9px);
}

/* ---- Mobile nav ----
   A checkbox toggle, not <details>: on desktop the links must render whether
   or not anything is "open", and forcing a closed <details>'s content visible
   depends on browser internals (Chrome 121+ moved it to ::details-content).
   If that override ever failed, the primary navigation would disappear on
   desktop. A checkbox has no such dependency, and the input stays focusable
   so Tab + Space works. One copy of the links serves both layouts. */
.nav-toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    cursor: pointer;
    color: var(--ink);
    border-radius: 8px;
    transition: background 0.15s;
}

.nav-burger:hover {
    background: rgba(22, 35, 59, 0.06);
}

.nav-toggle:focus-visible ~ .nav-burger {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.nav-toggle:checked ~ .nav-burger {
    background: rgba(22, 35, 59, 0.08);
}

@media (max-width: 1150px) {
    .nav-burger {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 50;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--card);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 18px 40px -24px rgba(22, 35, 59, 0.5);
        padding: 6px var(--edge) 18px;
    }

    .nav-toggle:checked ~ .nav-links {
        display: flex;
    }

    /* Desktop puts the language before the envelope. In the stacked panel that
     would drop a settings control into the middle of the link list, so order
     keeps the links together, language after them, button last. */
    .nav-links .lang-switch {
        order: 1;
    }

    .nav-links .btn {
        order: 2;
    }

    .nav-links a:not(.btn) {
        display: block;
        padding: 14px 2px;
        font-size: 16px;
        border-bottom: 1px solid var(--line);
    }

    /* In the stacked panel there is room for the word, and an unlabelled icon
     among six text rows reads as a mistake. Needs `.nav-links a.nav-icon` to
     outrank the display:block above, or the icon and the word stack. */
    .nav-links a.nav-icon {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .nav-icon-label {
        display: inline;
    }

    .nav-links .btn {
        margin-top: 16px;
        width: 100%;
    }

    /* The language menu stays a nested disclosure, but flat inside the panel. */
    .lang-switch {
        display: block;
        padding: 12px 2px 0;
    }

    .lang-list {
        position: static;
        min-width: 0;
        padding: 4px 0 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .lang-list a,
    .lang-list .on {
        padding: 9px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        scroll-behavior: auto;
    }
}