/* Styles for the reusable team Create / Join panels.
   Used inline on the setup page and inside a modal on the city map. */

.ts-panels {
    display: block;
    margin-top: 0;
    /* Host positioning context for the leaving panel's absolute lift-out
       (see .ts-panel.is-leaving below). We also JS-animate `height` on this
       wrapper during tab swaps so the card doesn't snap between the
       Create/Join intrinsic heights. */
    position: relative;
    transition: height 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    .ts-panels { transition: none; }
}

/* --- Toggle tabs --- */
.ts-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: var(--setup-radius-pill);
    margin-bottom: 20px;
}

.ts-tab {
    min-height: 44px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    padding: 8px 18px;
    background: transparent;
    color: #4a4a4a;
    border: none;
    border-radius: var(--setup-radius-pill);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ts-tab:hover:not(.is-active) {
    color: #0a0a0a;
}

.ts-tab.is-active {
    background: #0a0a0a;
    color: #fff;
}

/* --- Single active panel --- */
.ts-panel {
    display: block;
}

.ts-panel[hidden] {
    display: none;
}

.ts-panel-lead {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.875rem;
    color: #4a4a4a;
    margin: 0 0 16px;
    line-height: 1.5;
}

.ts-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ts-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-label {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4a4a4a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ts-input {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.95rem;
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    border-radius: var(--setup-radius-sm);
    background: #fff;
    color: #0a0a0a;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.ts-input:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* Field in an error state — triggered by adding .has-error on .ts-field. */
.ts-field.has-error .ts-input {
    border-color: #dc2626;
}

.ts-field.has-error .ts-input:focus {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.ts-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.ts-pin-input {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 1.15rem;
}

.ts-field-hint {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #6b7280;
}

/* Name-is-available confirmation — the hint slot flips to the captured-sector
   green so the user gets a positive signal without an extra chip. */
.ts-field-hint.is-ok {
    color: #00a646;
    font-weight: 500;
}

.ts-submit {
    min-height: 44px;
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.4px;
    padding: 11px 20px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: var(--setup-radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    align-self: flex-start;
}

.ts-submit:hover:not(:disabled) {
    background: #333;
    transform: translateY(-1px);
}

.ts-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Inline error chip (under a field) --- */
.ts-field-error {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.82rem;
    color: #b91c1c;
    display: block;
    margin-top: 2px;
}

.ts-field-error[hidden] {
    display: none;
}

/* Block variant: full-width red banner for submit-level errors. */
.ts-field-error--block {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 12px;
}

/* --- PIN preview (join tab) --- */
.ts-preview {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.875rem;
    padding: 10px 14px;
    border-radius: var(--setup-radius-sm);
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    color: #0a0a0a;
}

.ts-preview.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* --- Success states (rendered when a draft/join is pending) --- */
.ts-success {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ts-success--card {
    background: transparent;
}

.ts-success-title {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0;
    color: #0a0a0a;
}

.ts-success-lead {
    font-family: 'Roboto', 'Inter', sans-serif;
    font-size: 0.9rem;
    margin: 0;
    color: #4a4a4a;
    line-height: 1.5;
}

.ts-pin-card {
    position: relative;
    display: grid;
    place-items: center;
    align-items: center;
    min-height: 74px;
    padding: 14px 64px;
    /* Shadow-only surface matches the rest of the setup aesthetic —
       no hard outline on the card even though the PIN is the focal
       element. */
    border: 1px solid transparent;
    border-radius: var(--setup-radius-md);
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05),
                0 6px 18px rgba(10, 10, 10, 0.08);
}

.ts-pin-code {
    width: 100%;
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 1.4rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    line-height: 1.2;
    font-weight: 600;
    text-align: center;
    overflow-wrap: anywhere;
    color: #000;
}

.ts-pin-copy {
    position: absolute;
    top: 50%;
    right: 14px;
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(10, 10, 10, 0.18);
    background: #fff;
    color: #0a0a0a;
    border-radius: 12px;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease;
}

.ts-pin-copy:hover {
    border-color: rgba(10, 10, 10, 0.45);
    background: #f2f3ef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ts-pin-copy:active {
    transform: translateY(-50%) scale(0.96);
}

.ts-pin-copy__icon,
.ts-pin-copy__check {
    grid-area: 1 / 1;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-pin-copy__check {
    display: none;
}

.ts-pin-copy.is-copied {
    border-color: #87d89f;
    background: #e9f9ee;
    color: #087a35;
}

.ts-pin-copy.is-copied .ts-pin-copy__icon {
    display: none;
}

.ts-pin-copy.is-copied .ts-pin-copy__check {
    display: block;
}

.ts-pin-copy__feedback {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ts-success-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

/* --- Tighter padding on small viewports --- */
@media (max-width: 560px) {
    .ts-pin-card {
        padding-inline: 60px;
    }
    .ts-pin-code {
        text-align: center;
    }
}

/* --- Shared border-radius tokens ---
   These live here (not only in setup.css) so the city_map team-setup
   modal, which loads this stylesheet but not setup.css, still resolves
   var(--setup-radius-*) correctly. setup.css declares the same values
   redundantly; both declarations agree, so cascade order doesn't matter. */
:root {
    --setup-radius-sm: 10px;
    --setup-radius-md: 12px;
    --setup-radius-lg: 16px;
    --setup-radius-pill: 999px;
}

/* --- Shared submit-button loading spinner ---
   Used by both the setup page and the city_map modal. Depends on
   @keyframes btnSpin from static/css/landing/base.css which both
   hosts load. */
.ts-submit.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.ts-submit.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ts-submit.is-loading::after {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.7);
    }
}

/* --- Shared Create/Join tab cross-fade ---
   JS adds .is-entering before unhiding and drops it on the next RAF so
   the transition runs. .is-leaving is set before a setTimeout hides
   the departing panel. */
.ts-panel {
    transition:
        opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.ts-panel.is-entering {
    opacity: 0;
    transform: translateX(8px);
}
.ts-panel.is-leaving {
    opacity: 0;
    transform: translateX(-8px);
    /* Lift out of flow so the incoming panel defines the container's
       intrinsic height immediately — avoids the brief "card grows taller
       than either panel needs" flash during the cross-fade. */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ts-panel,
    .ts-panel.is-entering,
    .ts-panel.is-leaving {
        transition: none;
        transform: none;
    }
    .ts-panel.is-entering { opacity: 0; }
}

/* --- Shared error shake ---
   Added to the form element on validation/submission failure; JS
   forces a reflow via void offsetWidth so consecutive failures
   re-trigger. */
@keyframes setupShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
.setup-shake {
    animation: setupShake 0.35s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .setup-shake { animation: none; }
}

/* --- Shared toast ---
   The DOM host (#setupToast) must be rendered by the page. Both
   setup.html and the city_map team-setup section render one so
   window.SetupToast.show() works in either context. */
.setup-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 24px);
    background: #0a0a0a;
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--setup-radius-pill);
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.4px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    width: calc(100vw - 32px);
    max-width: 420px;
    box-sizing: border-box;
    line-height: 1.4;
    text-align: center;
    transition:
        opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
.setup-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.setup-toast.is-success { background: #047857; }
.setup-toast.is-error   { background: #b91c1c; }
@media (prefers-reduced-motion: reduce) {
    .setup-toast {
        transition: opacity 0.12s linear;
        transform: translate(-50%, 0);
    }
}

/* Use the discovery dropdown within the narrower team form. */
.ts-city-picker .see-city-availability-menu { width: 100%; }
.ts-city-picker .see-city-availability-trigger { min-height: 50px; border-radius: 13px; }
.ts-city-picker .see-city-availability-value { font-size: 1rem; font-weight: 600; }
.ts-city-picker .see-city-suggestion { min-height: 48px; line-height: 1.35; }
.ts-city-coming-soon { margin: 0; padding: 12px 14px; border-top: 1px solid #eceeec; color: #747974; background: #f7f8f7; font-size: 13px; }
[data-ts-city-field] > select[hidden] { display: none; }

.setup-step-card:has(.ts-city-picker.is-open) { z-index: 2; }
@media (max-width: 400px) {
    .ts-city-picker .see-city-availability-trigger { grid-template-columns: minmax(0, 1fr) 18px; }
    .ts-city-picker .see-city-availability-trigger .see-city-suggestion-status { display: none; }
}