/* Rally player screens (UI phase 2).
   Patterns used across home, open play, clubs, players, profile, coaches, venue, booking and receipt.
   Loaded after components.css. The older duplicate rules for these pieces were removed from
   style.css, theme.css and booking-payments.css (see tools/phase2-css.mjs). Light mode only. */

/* ---------- Page header ---------- */
.market-page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 32px}
.market-page-title h1{margin:0 0 8px;font-size:48px;line-height:1.1;letter-spacing:-.03em}
.market-page-title p{max-width:62ch;margin:0;color:var(--r-ink-2);font-size:17px;line-height:1.45}
.market-page-title .actions{display:flex;flex-wrap:wrap;gap:8px}
.market-page-title .btn{font-size:15px}
/* Location line above a venue name: plain text, no wide tracking. */
.market-app .venue-title .eyebrow{display:block;margin:0 0 8px;color:var(--r-ink-2);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.backlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:16px 0 8px;color:var(--r-link);font-size:15px;font-weight:500;text-decoration:none}
.backlink:hover{text-decoration:underline}
@media(max-width:700px){
 .market-page-title{flex-direction:column;align-items:flex-start;gap:16px;margin:0 0 24px}
 .market-page-title h1{font-size:34px;letter-spacing:-.025em}
 .market-page-title p{font-size:15px}
 .market-page-title .actions{width:100%}
 .backlink{margin:8px 0 4px}
}

/* ---------- Search and filter card ---------- */
.discover-search{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;align-items:end;gap:16px;margin:0 0 48px;padding:20px;border:1px solid var(--r-line);border-radius:16px;background:var(--r-surface)}
.discover-field{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0;border:0}
.discover-field>span{color:var(--r-ink);font-size:13px;font-weight:600}
/* 17px text: readable, and iPhone does not zoom the page when the field is focused. */
.discover-field input,.discover-field select{width:100%;height:auto;min-height:44px;margin:0;padding:0 12px;border:1px solid var(--r-line-strong);border-radius:12px;background:var(--r-surface);box-shadow:none;color:var(--r-ink);font-size:17px;text-overflow:ellipsis}
.discover-field input::placeholder{color:var(--r-ink-3)}
.discover-field input:focus-visible,.discover-field select:focus-visible{outline:2px solid var(--r-blue);outline-offset:1px;border-color:var(--r-blue)}
.discover-search>.btn{min-height:44px;margin:0;justify-content:center;white-space:nowrap}
@media(max-width:900px){
 .discover-search{grid-template-columns:repeat(2,minmax(0,1fr))}
 .discover-search .search-name,.discover-search>.btn,.events-search .discover-field:last-of-type{grid-column:1/-1}
}
@media(max-width:700px){
 .discover-search{gap:12px;margin-bottom:32px;padding:16px}
 .discover-top .discover-search{order:1;margin:0}
}
@media(max-width:359px){.discover-search{grid-template-columns:1fr}}

/* ---------- Chips on the page background (venue facts, session facts) ---------- */
.venue-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.venue-tags span,.sessionmeta>span{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border:1px solid var(--r-line);border-radius:999px;background:var(--r-surface);color:var(--r-ink-2);font-size:13px;font-weight:500;line-height:18px}

/* ---------- Player facts as a grouped list ---------- */
.player-facts{display:block;max-width:560px;margin:24px 0}
.player-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--r-line)}
.player-facts>div:first-child{border-top:1px solid var(--r-line)}
.player-facts dt{flex:none;margin:0;color:var(--r-ink-2);font-size:15px}
.player-facts dd{min-width:0;margin:0;color:var(--r-ink);font-size:15px;text-align:right;overflow-wrap:anywhere}

/* ---------- Player and coach list cards: avatar beside the details ---------- */
.player-find-card{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;row-gap:2px;align-items:start}
.player-find-card>:first-child{grid-row:1/span 6;margin:0}
.player-find-card .profile-avatar{width:64px;height:64px}
.player-find-card>h2{grid-column:2;margin:0 0 2px;font-size:17px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.player-find-card>p{grid-column:2;margin:0;color:var(--r-ink-2);font-size:15px;line-height:1.4}
.player-find-card>.btn{grid-column:2;justify-self:start;margin-top:10px}
.coach-monogram{display:grid;place-items:center;width:56px;height:56px;margin-bottom:16px;border-radius:50%;background:var(--r-blue-tint);color:var(--r-link);font-size:17px;font-weight:600;letter-spacing:.02em}

/* ---------- Long tab rows: fade the edge so more tabs read as scrollable ---------- */
@media(max-width:700px){
 .club-tabs{padding-right:32px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
}

/* ---------- Links that stay inside Rally end in a chevron (polish() in ui.mjs) ---------- */
.link-chevron{display:inline-block;width:7px;height:7px;margin-left:6px;border-top:1.75px solid currentColor;border-right:1.75px solid currentColor;transform:translateY(-1px) rotate(45deg)}

/* ---------- Owner starting point on the home page ---------- */
.owner-start{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:48px 0;padding:24px;border:1px solid var(--r-line);border-radius:16px;background:var(--r-surface)}
.owner-start h2{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}
.owner-start p{margin:0;color:var(--r-ink-2);font-size:15px;line-height:1.45}
.owner-start .btn{flex:none}
@media(max-width:700px){.owner-start{flex-direction:column;align-items:stretch;gap:16px;margin:32px 0;padding:20px}}

/* ---------- Booking receipt: payment status and progress ---------- */
.payment-state{display:inline-flex;align-items:center;min-height:24px;padding:4px 10px;border:0;border-radius:999px;background:var(--r-bg);color:var(--r-ink-2);font-size:13px;font-weight:600;line-height:16px}
.payment-state.state-submitted{background:var(--r-blue-tint);color:var(--r-link)}
.payment-state.state-confirmed{background:#e6f6ec;color:#1b7a43}
.payment-state.state-correction{background:var(--r-gold-tint);color:var(--r-gold-ink)}
.payment-state.state-expired,.payment-state.state-cancelled{background:#eeeef0;color:var(--r-ink-2)}
.receipt-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:24px 0 8px;padding:0;list-style:none;counter-reset:receipt-step}
.receipt-progress li{position:relative;padding-top:30px;color:var(--r-ink-2);font-size:13px;line-height:1.3;text-align:center;counter-increment:receipt-step}
.receipt-progress li::before{content:counter(receipt-step);position:absolute;top:0;left:50%;z-index:1;box-sizing:border-box;width:24px;height:24px;margin-left:-12px;border:1.5px solid var(--r-line-strong);border-radius:50%;background:var(--r-surface);color:var(--r-ink-2);font-size:12px;font-weight:600;line-height:21px;text-align:center}
.receipt-progress li::after{content:"";position:absolute;top:11px;left:50%;width:100%;height:2px;background:var(--r-line)}
.receipt-progress li:last-child::after{display:none}
.receipt-progress li.is-done{color:var(--r-ink)}
.receipt-progress li.is-done::before{content:"✓";border-color:var(--r-blue);background:var(--r-blue);color:#fff}
.receipt-progress li.is-done::after{background:var(--r-blue)}
.receipt-progress li.is-current{color:var(--r-ink);font-weight:600}
.receipt-progress li.is-current::before{border-color:var(--r-blue);color:var(--r-link)}
.receipt-progress li.is-attention{color:var(--r-gold-ink);font-weight:600}
.receipt-progress li.is-attention::before{content:"!";border-color:#d9a93a;background:var(--r-gold-tint);color:var(--r-gold-ink)}
.receipt-progress li.is-stopped{color:var(--r-ink-2);font-weight:600}
.receipt-progress li.is-stopped::before{content:"–";border-color:var(--r-ink-2);color:var(--r-ink-2)}
.receipt-progress-note,.payment-list-panel .receipt-progress-note{margin:0 0 16px;color:var(--r-ink-2);font-size:13px;line-height:1.4;text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Match history on player profiles (phones) ----------
   Date · format and status on top; session and teams on the left; the score stays on one line. */
@media(max-width:660px){
 .livehistory>.resultrow:has(>div>a){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta status" "teams score";align-items:start;gap:8px 16px}
 .livehistory>.resultrow:has(>div>a)>span:first-child{grid-area:meta;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;color:var(--r-ink-2);font-size:13px}
 .livehistory>.resultrow:has(>div>a)>span:first-child small{display:inline;margin:0;font-size:13px}
 .livehistory>.resultrow:has(>div>a)>span:first-child small::before{content:"· "}
 .livehistory>.resultrow:has(>div>a)>div{grid-area:teams;font-size:15px;line-height:1.45;overflow-wrap:normal}
 .livehistory>.resultrow:has(>div>a)>div>a{display:block;margin-bottom:2px;font-weight:600}
 .livehistory>.resultrow:has(>div>a)>b{grid-area:score;align-self:center;font-size:17px;white-space:nowrap}
 .livehistory>.resultrow:has(>div>a)>span:last-child{grid-area:status;justify-self:end;padding:2px 8px;border-radius:999px;background:var(--r-surface);color:var(--r-ink-2);font-size:12px;font-weight:600;line-height:16px}
 .livehistory>.resultrow:has(>div>a)>.result-review,.livehistory>.resultrow:has(>div>a)>.textbutton{grid-column:1/-1}
 .livehistory>.resultrow:has(>div>a)>.textbutton{justify-self:end}
}
/* Player names in a team line stay whole; the line breaks at "+". */
.team-player{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* ---------- Search row on Players, Clubs and Coaching (wider screens) ----------
   The text field gets the room; skill fields and the button stay compact. */
@media(min-width:701px){
 .community-search{max-width:880px}
 .community-search .field:first-child{flex:2 1 0}
 .community-search .btn{height:auto;min-height:48px}
}