/*
 * arena.css — DRTX Arena.
 *
 * Colours, type and shape all come from brand/drtx-tokens.css. Nothing in this
 * file invents a colour: if a value is needed that is not a token, the token
 * set is what is wrong.
 *
 * Per the brand: no gradients, no glows, 4px radii, and the 5px cyan edge bar
 * reserved for something that is live.
 */

/* The two faces the tokens name, served from here rather than from Google.
 * Both are the variable cuts — Archivo carries the width axis the display
 * style needs, and a static cut cannot do font-stretch. */
@font-face {
    font-family: 'Archivo';
    src: url('../fonts/Archivo[wdth,wght].ttf') format('truetype-variations'),
         url('../fonts/Archivo[wdth,wght].ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono[wght].ttf') format('truetype-variations'),
         url('../fonts/JetBrainsMono[wght].ttf') format('truetype');
    font-weight: 400 600;
    font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * `hidden` has to win.
 *
 * The browser's own rule is [hidden] { display: none }, which any rule with a
 * class in it outranks. So `.bar { display: flex }` quietly beat the hidden
 * attribute and the signed-in header stayed on screen behind the sign-in form,
 * pushing it off centre — while every piece of JavaScript that sets .hidden
 * looked correct, because it was.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--drtx-bg);
    color: var(--drtx-text);
    font-family: var(--drtx-font-sans);
    font-size: 16px;
    line-height: 1.5;
    /* A phone in a pub is held in one hand. 16px of gutter, and the safe-area
     * inset so a notch does not sit on top of the sign-out button. */
    padding: 0 max(16px, env(safe-area-inset-left)) 48px
             max(16px, env(safe-area-inset-right));
}

/* --- the bar ----------------------------------------------------------- */

.bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--drtx-border);
}
.bar-mark { display: block; height: 24px; width: auto; }
.bar-product {
    color: var(--drtx-accent);
    border-left: 1px solid var(--drtx-border);
    padding-left: 12px;
}
.bar-spacer { flex: 1 1 auto; }
.bar-who {
    color: var(--drtx-text-muted);
    font-size: 14px;
    /* On a narrow screen the address is the first thing worth losing. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
}

/* --- signing in -------------------------------------------------------- */

.gate {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gate-card { width: 100%; max-width: 380px; }
.gate-mark { display: block; height: 39px; width: auto; margin: 0 0 6px; }
.gate-product { color: var(--drtx-accent); margin: 0 0 28px; }

.card {
    background: var(--drtx-surface);
    border: 1px solid var(--drtx-border);
    border-radius: var(--drtx-radius);
    padding: 28px 24px;
}

.field { display: block; margin-bottom: 18px; }
.field-label { display: block; color: var(--drtx-text-muted); margin-bottom: 6px; }
.field input {
    width: 100%;
    padding: 11px 12px;
    background: var(--drtx-bg);
    color: var(--drtx-text);
    border: 1px solid var(--drtx-border);
    border-radius: var(--drtx-radius);
    font-family: inherit;
    /* 16px or iOS zooms the page in when the field takes focus, and the
     * layout never comes back without a pinch. */
    font-size: 16px;
}
.field input:focus-visible {
    outline: 2px solid var(--drtx-accent);
    outline-offset: 1px;
    border-color: var(--drtx-accent);
}

.button {
    width: 100%;
    padding: 12px 16px;
    background: var(--drtx-accent);
    color: var(--drtx-midnight);
    border: 1px solid var(--drtx-accent);
    border-radius: var(--drtx-radius);
    font-family: var(--drtx-font-sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    cursor: pointer;
    /* 44px is the smallest target a thumb finds reliably. */
    min-height: 44px;
}
.button:hover { background: var(--drtx-white); border-color: var(--drtx-white); }
.button:focus-visible { outline: 2px solid var(--drtx-white); outline-offset: 2px; }
.button[disabled] { opacity: 0.55; cursor: default; }
.button[disabled]:hover { background: var(--drtx-accent); border-color: var(--drtx-accent); }

.link {
    background: none;
    border: 0;
    color: var(--drtx-accent);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 4px;
    min-height: 44px;
    /* "Sign out" is two words and a phone will break it across two lines,
     * which makes the bar taller than everything in it. The name beside it
     * truncates instead — it is the part somebody can afford to lose. */
    white-space: nowrap;
    flex: 0 0 auto;
}
.link:hover { color: var(--drtx-white); text-decoration: underline; }
.link:focus-visible { outline: 2px solid var(--drtx-accent); outline-offset: 2px; }

/* --- messages ---------------------------------------------------------- */

.notice {
    color: var(--drtx-text-muted);
    font-size: 14px;
    margin: 0 0 18px;
    padding: 10px 12px;
    border: 1px solid var(--drtx-border);
    border-radius: var(--drtx-radius);
    background: var(--drtx-bg);
}
/* Red is a system state, never decoration. #FF8A9B rather than the brand's
 * danger red, which measured 4.22:1 on raised navy and failed AA. */
.notice-bad { color: #FF8A9B; border-color: #FF8A9B; }

.boot { color: var(--drtx-text-muted); padding: 48px 0; text-align: center; }

/* --- clubs and competitions -------------------------------------------- */

.panel { margin: 28px 0; }
.panel-title { margin: 0 0 14px; font-size: 24px; }

.clubs, .comps { list-style: none; margin: 0; padding: 0; }
.clubs li, .comps li { margin-bottom: 8px; }

.club, .comp {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--drtx-surface);
    border: 1px solid var(--drtx-border);
    border-radius: var(--drtx-radius);
    padding: 14px 16px;
    color: var(--drtx-text);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    min-height: 44px;
}
.club:hover, .comp:hover { border-color: var(--drtx-accent); }
.club:focus-visible, .comp:focus-visible {
    outline: 2px solid var(--drtx-accent);
    outline-offset: 2px;
}
.club[aria-pressed="true"] {
    border-color: var(--drtx-accent);
    box-shadow: inset var(--drtx-edge-bar) 0 0 var(--drtx-accent);
}

.club-name, .comp-name { display: block; font-weight: 700; }
.club-meta, .comp-meta {
    display: block;
    color: var(--drtx-text-muted);
    font-size: 13px;
    margin-top: 2px;
}

/* A competition being played is the one thing on this page worth the edge
 * bar. Everything else is a record of something that already happened. */
.comp.is-live { box-shadow: inset var(--drtx-edge-bar) 0 0 var(--drtx-live); }

.tag {
    font-family: var(--drtx-font-mono);
    font-size: 11px;
    letter-spacing: var(--drtx-label-tracking);
    text-transform: uppercase;
    border: 1px solid var(--drtx-border);
    border-radius: var(--drtx-radius);
    padding: 1px 6px;
    margin-left: 8px;
    color: var(--drtx-text-muted);
    white-space: nowrap;
}
.tag-live { color: var(--drtx-live); border-color: var(--drtx-live); }

/* Wider than a phone: the two panels sit side by side rather than the
 * competitions being a scroll away from the club that lists them. */
@media (min-width: 820px) {
    body { padding-left: 32px; padding-right: 32px; }
    .app {
        display: grid;
        grid-template-columns: minmax(220px, 300px) 1fr;
        gap: 32px;
        align-items: start;
    }
}

/* Somebody will print a list of competitions. */
@media print {
    .bar, .link { display: none; }
    body { background: #fff; color: #000; padding: 0; }
    .card, .club, .comp { border-color: #999; background: #fff; color: #000; }
}