/* ============================================================================ Play lens — a self-contained overlay on Court Access. Courts is untouched: with the lens on "Courts" (default) has no .ca-lens-play class, so #ca-play stays display:none and nothing here applies to the existing SPA. Uses the v1.1 tokens court-access already imports. ============================================================================ */ /* the Courts | Play switch (lives in the header) */ .ca-lens{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:2px;flex-shrink:0} .ca-lens button{background:none;border:0;color:color-mix(in srgb, var(--text) 52%, transparent); padding:6px 15px;cursor:pointer;font-family:var(--font-label);font-size:10px;letter-spacing:.16em; text-transform:uppercase;border-radius:999px;-webkit-tap-highlight-color:transparent;transition:color .15s} .ca-lens button:hover{color:var(--text)} .ca-lens button.on{background:color-mix(in srgb, var(--text) 10%, transparent);color:var(--text)} /* when Play is active, hide the Courts-only chrome: the header planner + view toggle, and the mobile bottom sheet / location banner which are fixed at a higher z-index than the overlay and would otherwise show through it. */ body.ca-lens-play .ca-when-where, body.ca-lens-play #ca-view-toggle, body.ca-lens-play #ca-radius-row, body.ca-lens-play .ca-locbanner, body.ca-lens-play .ca-playnudge, body.ca-lens-play .ca-sheet{display:none !important} /* P7: quiet Courts→Play entry, next to the segment. Muted, not a pill. */ .ca-playnudge{background:none;border:0;color:color-mix(in srgb, var(--text) 46%, transparent); font-family:var(--font-sans);font-size:12px;cursor:pointer;padding:6px 4px;white-space:nowrap; -webkit-tap-highlight-color:transparent;transition:color .15s} .ca-playnudge:hover{color:var(--text)} /* P7: the "in Courts ↗" link on a Play slot row */ .pl2-clink{font-size:11px;color:color-mix(in srgb, var(--text) 40%, transparent);text-decoration:none;white-space:nowrap;margin-left:2px} .pl2-clink:hover{color:var(--forest-soft)} /* the overlay — covers everything below the sticky header (which sits at z-30) */ #ca-play{position:fixed;left:0;right:0;top:0;bottom:0;z-index:20;background:var(--bg); overflow-y:auto;display:none;-webkit-overflow-scrolling:touch} body.ca-lens-play #ca-play{display:block} .pl2-wrap{max-width:900px;margin:0 auto;padding:24px 22px 100px} .pl2-h1{font-family:var(--font-display);font-size:30px;line-height:1.15;margin:0 0 8px;color:var(--text)} .pl2-lede{font-size:13.5px;color:color-mix(in srgb, var(--text) 62%, transparent);line-height:1.6;max-width:520px;margin:0 0 26px} .pl2-lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 40%, transparent);margin:0 0 11px} .pl2-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px} .pl2-chip{border:1px solid var(--border);background:none;color:color-mix(in srgb, var(--text) 62%, transparent); padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;font-family:var(--font-sans);font-weight:300; display:inline-flex;align-items:center;gap:8px;transition:color .18s,border-color .18s,background .18s} .pl2-chip:hover{color:var(--text);border-color:color-mix(in srgb, var(--text) 40%, transparent)} .pl2-chip.on{background:var(--forest-soft);border-color:var(--forest-soft);color:var(--night)} .pl2-chip .hint{font-size:10.5px;opacity:.6} .pl2-chip.add{border-style:dashed;color:color-mix(in srgb, var(--text) 40%, transparent)} /* P5: inline add-a-partner (writes to the same store as /home) */ .pl2-addform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-14px 0 24px} .pl2-addin{background:none;border:1px solid var(--border);border-radius:6px;padding:8px 11px;color:var(--text);font-family:var(--font-sans);font-size:13px;min-width:150px} .pl2-addin::placeholder{color:color-mix(in srgb, var(--text) 34%, transparent)} .pl2-addin:focus{outline:none;border-color:var(--brass)} /* the field is the one earned glow */ .pl2-addgo{background:var(--forest-soft);border:1px solid var(--forest-soft);color:var(--night);border-radius:999px;padding:8px 16px;cursor:pointer;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--font-label)} .pl2-addgo[disabled]{opacity:.4;cursor:default} .pl2-addx{background:none;border:0;color:color-mix(in srgb, var(--text) 45%, transparent);cursor:pointer;font-size:12px;font-family:var(--font-sans)} .pl2-addx:hover{color:var(--text)} .pl2-addmsg{font-size:12px;color:var(--forest-soft);width:100%;min-height:1em} .pl2-addmsg.warn{color:var(--accent)} .pl2-fmt{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:26px} .pl2-seg{display:flex;border:1px solid var(--border)} .pl2-seg button{background:none;border:0;color:color-mix(in srgb, var(--text) 55%, transparent); padding:9px 16px;cursor:pointer;font-size:12.5px;font-family:var(--font-sans)} .pl2-seg button.on{background:color-mix(in srgb, var(--text) 10%, transparent);color:var(--text)} .pl2-fill{font-family:var(--font-display);font-style:italic;font-size:19px;color:color-mix(in srgb, var(--text) 62%, transparent)} .pl2-fill b{color:var(--text);font-style:normal;font-family:var(--font-sans);font-size:15px} /* groups seam — one quiet line, no affordance */ .pl2-ghint{font-size:12px;color:color-mix(in srgb, var(--text) 45%, transparent);line-height:1.5;margin:-8px 0 22px;max-width:520px} /* weather on a slot row — small, dim, inline. Brass only when it's a problem. */ .pl2-wx{font-size:11px;color:color-mix(in srgb, var(--text) 40%, transparent);letter-spacing:.01em;white-space:nowrap} .pl2-wx.warn{color:var(--brass)} .pl2-wx.indoor{color:color-mix(in srgb, var(--text) 40%, transparent);font-style:italic} .pl2-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start} .pl2-slot{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;align-items:flex-start} .pl2-slot:first-of-type{border-top:1px solid var(--border)} .pl2-box{flex:0 0 15px;height:15px;border:1px solid color-mix(in srgb, var(--text) 26%, transparent);margin-top:3px;position:relative} .pl2-slot.on .pl2-box{background:var(--forest-soft);border-color:var(--forest-soft)} .pl2-slot.on .pl2-box::after{content:"✓";position:absolute;inset:0;color:var(--night);font-size:11px;display:flex;align-items:center;justify-content:center} .pl2-m{flex:1 1 auto;min-width:0} .pl2-when{font-size:15px;color:var(--text)} .pl2-where{font-size:12.5px;color:color-mix(in srgb, var(--text) 62%, transparent);margin-top:4px} .pl2-fair{font-size:11px;color:color-mix(in srgb, var(--text) 40%, transparent);margin-top:4px} .pl2-r{flex:0 0 auto;text-align:right} .pl2-tag{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase} .pl2-tag.res{color:var(--forest-soft)} .pl2-tag.fc{color:color-mix(in srgb, var(--text) 40%, transparent)} .pl2-free{font-size:11.5px;color:var(--forest-soft);margin-top:5px} .pl2-free.part{color:color-mix(in srgb, var(--text) 40%, transparent)} .pl2-side{border:1px solid var(--border);overflow:hidden} .pl2-map{height:210px;background:color-mix(in srgb, var(--text) 4%, transparent);position:relative} .pl2-map svg{position:absolute;inset:0;width:100%;height:100%} .pl2-sideTxt{padding:16px 16px 18px} .pl2-sideT{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 40%, transparent);margin-bottom:9px} .pl2-legend{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:color-mix(in srgb, var(--text) 62%, transparent)} .pl2-legend div{display:flex;align-items:center;gap:9px} .pl2-ldot{width:7px;height:7px;border-radius:50%;flex:0 0 auto} .pl2-basis{font-size:11.5px;color:color-mix(in srgb, var(--text) 40%, transparent);line-height:1.6;margin-top:14px;border-left:1px solid var(--border);padding-left:11px} .pl2-cta{display:flex;align-items:center;gap:20px;margin-top:26px;flex-wrap:wrap} .pl2-go{background:var(--forest-soft);border:1px solid var(--forest-soft);color:var(--night); padding:12px 24px;border-radius:999px;cursor:pointer;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase} .pl2-go[disabled]{opacity:.28;cursor:default} .pl2-rule{font-size:12px;color:color-mix(in srgb, var(--text) 40%, transparent);line-height:1.6;margin-top:16px;max-width:560px} .pl2-msg{font-size:12.5px;color:var(--forest-soft);margin-top:12px;min-height:1.1em} .pl2-msg.warn{color:var(--accent)} .pl2-sec{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb, var(--text) 40%, transparent);margin:46px 0 16px} .pl2-game{border:1px solid var(--border);padding:16px 18px;margin-bottom:9px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .pl2-gw{flex:1 1 220px} .pl2-gwhen{font-size:15px;color:var(--text)} .pl2-gwhere{font-size:12.5px;color:color-mix(in srgb, var(--text) 62%, transparent);margin-top:4px} .pl2-gwho{font-size:11.5px;color:color-mix(in srgb, var(--text) 40%, transparent);margin-top:5px} .pl2-state{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:999px} .pl2-state.set{color:var(--forest-soft);border:1px solid color-mix(in srgb, var(--forest-soft) 45%, transparent)} .pl2-state.filling{color:var(--brass);border:1px solid color-mix(in srgb, var(--brass) 45%, transparent)} .pl2-state.waiting{color:color-mix(in srgb, var(--text) 40%, transparent);border:1px solid var(--border)} .pl2-empty{font-size:13px;color:color-mix(in srgb, var(--text) 55%, transparent);line-height:1.65;border:1px solid var(--border);padding:18px 20px} .pl2-empty a{color:var(--forest-soft)} @media(max-width:760px){ .pl2-grid{grid-template-columns:1fr} .ca-lens button{padding:6px 12px;letter-spacing:.12em} .pl2-h1{font-size:26px} }