/* Tennis Lady components — plain CSS classes on top of tokens.css. Prefix tl-. Phone-first. */
.tl-root{font-family:var(--font-sans);font-size:16px;line-height:24px;color:var(--ink);background:var(--surface);-webkit-text-size-adjust:100%}
.tl-root *,.tl-root *::before,.tl-root *::after{box-sizing:border-box}
.tl-display{font-family:var(--font-display);font-weight:800;letter-spacing:-0.015em;line-height:1.05;margin:0}
.tl-label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.tl-muted{color:var(--ink-muted)}
.tl-link{color:var(--court);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tl-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tl-root :focus-visible{outline:var(--ring-width) solid var(--focus);outline-offset:3px}

/* Button */
.tl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-comfort);padding:0 var(--space-6);border:2px solid transparent;border-radius:var(--radius-pill);font:600 16px/20px var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease,background .12s ease}
.tl-btn--block{display:flex;width:100%}
.tl-btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-press)}
.tl-btn--primary:hover{background:var(--brand-hover)}
.tl-btn--primary:active{transform:translateY(3px);box-shadow:0 0 0 0 transparent}
.tl-btn--serve{background:var(--optic);color:var(--on-optic);border-color:var(--on-optic)}
.tl-btn--serve:hover{filter:brightness(.96)}
.tl-btn--serve:active{transform:translateY(2px)}
.tl-btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.tl-btn--outline:hover{background:var(--surface-sunken)}
.tl-btn--quiet{background:transparent;color:var(--brand);min-height:var(--tap-min);padding:0 var(--space-3);text-decoration:underline;text-underline-offset:3px}
.tl-btn--sm{min-height:var(--tap-min);padding:0 var(--space-4);font-size:14px}
.tl-btn[disabled],.tl-btn[aria-disabled=true]{background:var(--surface-sunken);color:var(--ink-muted);border-color:var(--line);box-shadow:none;cursor:not-allowed}

/* Badge */
.tl-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 10px;border-radius:var(--radius-pill);font-size:12px;line-height:20px;font-weight:700;white-space:nowrap}
.tl-badge .tl-ico{width:14px;height:14px;stroke-width:2.5}
.tl-badge--brand{background:var(--brand);color:var(--on-brand)}
.tl-badge--captain{background:var(--brand-tint);color:var(--brand)}
.tl-badge--optic{background:var(--optic);color:var(--on-optic)}
.tl-badge--clay{background:var(--clay);color:var(--on-clay)}
.tl-badge--success{background:var(--success-tint);color:var(--success)}
.tl-badge--warning{background:var(--warning-tint);color:var(--warning)}
.tl-badge--danger{background:var(--danger-tint);color:var(--danger)}
.tl-badge--neutral{background:var(--surface-sunken);color:var(--ink-muted)}

/* Field */
.tl-field{display:flex;flex-direction:column;gap:6px}
.tl-input{width:100%;min-height:var(--tap-comfort);padding:var(--space-3) var(--space-4);border:2px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink);font:400 16px/24px var(--font-sans)}
.tl-input::placeholder{color:var(--ink-muted)}
.tl-input:focus{outline:var(--ring-width) solid var(--focus);outline-offset:2px;border-color:var(--ink)}
.tl-select{appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2385758a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.tl-field--invalid .tl-input{border-color:var(--danger);background:var(--danger-tint)}
.tl-hint{font-size:14px;line-height:20px;color:var(--ink-muted)}
.tl-error{display:flex;gap:6px;align-items:center;font-size:14px;line-height:20px;font-weight:600;color:var(--danger)}

/* Code input */
.tl-code{display:flex;gap:var(--space-2)}
.tl-code__box{flex:1;max-width:56px;height:64px;display:flex;align-items:center;justify-content:center;border:2px solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-raised);font:800 28px/1 var(--font-display);font-variant-numeric:tabular-nums}
.tl-code__box--active{border-color:var(--ink);box-shadow:0 0 0 var(--ring-width) var(--focus)}
.tl-code__box--filled{border-color:var(--ink)}

/* Chips */
.tl-chips{display:flex;gap:var(--space-2);overflow-x:auto;padding:2px;scrollbar-width:none}
.tl-chip{flex:none;min-height:var(--tap-min);padding:0 var(--space-4);border:2px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--surface-raised);color:var(--ink);font:600 14px/20px var(--font-sans);cursor:pointer}
.tl-chip[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* Card */
.tl-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4)}
.tl-card__title{font:700 22px/28px var(--font-display);margin:0}
.tl-card__meta{font-size:14px;line-height:20px;color:var(--ink-muted);margin:2px 0 0}
.tl-card--accent{background:var(--brand-tint);border-color:transparent;box-shadow:none}

/* Progress pips (players paid) */
.tl-pips{display:flex;gap:6px;align-items:center}
.tl-pip{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface-sunken)}
.tl-pip--on{background:var(--optic);border-color:var(--on-optic)}
.tl-pips__text{margin-left:var(--space-2);font-weight:600;font-size:14px}

/* Roster row */
.tl-rows{list-style:none;margin:0;padding:0}
.tl-row{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-comfort);padding:var(--space-2) 0;border-bottom:1px solid var(--line)}
.tl-row:last-child{border-bottom:0}
.tl-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--optic-tint);color:var(--ink);font:800 15px/1 var(--font-display)}
.tl-avatar--b{background:var(--brand-tint);color:var(--brand)}
.tl-avatar--c{background:var(--court-tint);color:var(--court)}
.tl-avatar--d{background:var(--clay-tint);color:var(--clay)}
.tl-row__main{flex:1;min-width:0}
.tl-row__name{font-weight:600}
.tl-row__sub{font-size:14px;line-height:20px;color:var(--ink-muted)}

/* Facility card */
.tl-facility{position:relative;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}
.tl-facility__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.tl-facility__price{display:flex;align-items:baseline;gap:6px;font:800 28px/28px var(--font-display)}
.tl-facility__price small{font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.tl-facility__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* App bar + tab bar */
.tl-appbar{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--space-4);background:var(--surface);border-bottom:1px solid var(--line)}
.tl-wordmark{font:800 15px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--brand);display:flex;align-items:center;gap:8px}
.tl-wordmark::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--optic);border:2px solid var(--brand)}
.tl-tabbar{display:grid;grid-template-columns:repeat(4,1fr);height:var(--tabbar-height);background:var(--surface-raised);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tl-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink-muted);font:600 12px/16px var(--font-sans);text-decoration:none;position:relative}
.tl-tab[aria-current=page]{color:var(--brand)}
.tl-tab[aria-current=page]::before{content:"";position:absolute;top:0;width:32px;height:4px;border-radius:0 0 4px 4px;background:var(--optic);border:1px solid var(--on-optic);border-top:0}

/* Banner */
.tl-banner{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-size:14px;line-height:20px}
.tl-banner b{display:block;font-size:16px;line-height:24px}
.tl-banner--info{background:var(--court-tint);color:var(--ink)} .tl-banner--info .tl-ico{color:var(--court)}
.tl-banner--good{background:var(--optic-tint);color:var(--ink)}
.tl-banner--success{background:var(--success-tint);color:var(--ink)} .tl-banner--success .tl-ico{color:var(--success)}
.tl-banner--warn{background:var(--warning-tint);color:var(--ink)} .tl-banner--warn .tl-ico{color:var(--warning)}
.tl-banner--danger{background:var(--danger-tint);color:var(--ink)} .tl-banner--danger .tl-ico{color:var(--danger)}

/* Phone frame used by showcase previews only */
.tl-phone{color:var(--ink);width:340px;border:2px solid var(--ink);border-radius:32px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.tl-screen{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);flex:1}
@media (prefers-reduced-motion:reduce){.tl-btn{transition:none}}