/* The free round maker (#460). Loaded after landing.css, which supplies the
   tokens, the header, the buttons and the footer; only what is specific to this
   page is here. No new colours: every value is a landing.css variable. */

.rounds-page { padding-bottom: 56px; }

.rounds-intro { padding-top: 40px; }
.rounds-intro h1 { margin: 16px 0 14px; font-size: clamp(1.9rem, 7vw, 3rem); }
.rounds-intro .lede { max-width: 48ch; }

/* The one sentence that says nothing is kept. It is the first thing under the
   heading so it is read before anything is typed, and it is more than a colour:
   a bar on the left and heavier type. */
.rounds-note {
    margin-top: 18px;
    padding: 12px 14px;
    max-width: 60ch;
    border-left: 4px solid var(--blue-dark);
    border-radius: 10px;
    background: var(--blue-50);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 600;
}

.rounds-card {
    margin-top: 24px;
    padding: 20px;
    display: grid;
    gap: 8px;
    max-width: 640px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.rounds-card label { margin-top: 8px; font-weight: 700; color: var(--ink); }
.rounds-card label:first-child { margin-top: 0; }
/* 16px: below that, iOS zooms the page when the field is focused. */
.rounds-card textarea,
.rounds-card input {
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--gray-400);
    border-radius: 12px;
    padding: 12px;
}
.rounds-card textarea { width: 100%; min-height: 11rem; resize: vertical; }
.rounds-card input { width: 7rem; min-height: 48px; }
.rounds-card textarea:focus-visible,
.rounds-card input:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }
.rounds-card .cta { margin-top: 12px; min-height: 52px; }

/* A refusal says what to do next. Bold and a bar, so it is not only red. */
.rounds-error {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-left: 4px solid var(--red);
    border-radius: 8px;
    background: var(--slate-100);
    color: var(--red);
    font-weight: 700;
}
.rounds-error[hidden] { display: none; }

.rounds-results { margin-top: 36px; }
.rounds-results[hidden] { display: none; }
.rounds-results h2 { font-size: 1.5rem; }

.round-card {
    margin-top: 16px;
    padding: 16px;
    max-width: 760px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.round-card h3 { font-size: 1.15rem; }

.court-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.court {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 12px;
    background: var(--slate-100);
    border: 1px solid var(--gray-200);
}
.court-name { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-600); }
.court-sides { display: grid; gap: 2px; }
.court-side { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.court-versus { font-size: 0.9rem; color: var(--gray-600); }

.round-note { margin-top: 10px; font-size: 0.92rem; }
.sitting { margin-top: 12px; color: var(--gray-600); overflow-wrap: anywhere; }
.sitting-label { font-weight: 800; color: var(--ink); }

.rounds-app {
    margin-top: 40px;
    padding: 24px;
    display: grid;
    justify-items: start;
    gap: 12px;
    max-width: 760px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--slate-100);
}
.rounds-app h2 { font-size: 1.35rem; }

.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: var(--gray-600); font-size: 0.92rem; }
.footer-links a:hover { color: var(--blue-dark); }

/* On a phone the first press has to be reachable without scrolling: the intro
   is tightened and the name box starts shorter (it scrolls, and can be
   dragged taller) so "Make round" is on the first screen in Danish too,
   whose sentences run longer. dev/test_fair_rounds_ui.py measures it. */
@media (max-width: 560px) {
    .rounds-intro { padding-top: 20px; }
    .rounds-intro h1 { margin: 12px 0 10px; }
    .rounds-intro .lede { font-size: 1rem; }
    .rounds-note { margin-top: 12px; padding: 10px 12px; font-size: 0.9rem; }
    .rounds-card { margin-top: 16px; padding: 16px; }
    .rounds-card textarea { min-height: 7rem; }
}

@media (min-width: 640px) {
    .court { grid-template-columns: 5.5rem 1fr; align-items: center; }
    .court-sides { grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: baseline; }
}