/* LOCAL (see PATCHES.md patch 246): the "Tell us" bubble. Behaviour in public/js/tell-us.js. */
.tellus {
    --tu-navy: #0A1A3F;
    --tu-navy-2: #13275A;
    --tu-gold: #FFD800;
    --tu-ink: #0B1633;
    --tu-line: #E4E7EC;
    --tu-bar: 0px;
    --tu-x: 16px;
    --tu-y: 16px;
    position: fixed;
    inset: auto 0 0 auto;
    z-index: 1045;
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tellus[hidden] { display: none !important; }
@media (max-width: 767.98px) {
    .tellus--bar { --tu-bar: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* The bubble. Placed by --tu-x (from the side it sits on) and --tu-y (from the bottom). */
.tellus-bubble {
    position: fixed;
    right: var(--tu-x);
    bottom: calc(var(--tu-y) + var(--tu-bar));
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--tu-navy-2), var(--tu-navy) 70%);
    box-shadow: 0 8px 24px rgba(10, 26, 63, .35), 0 0 0 2px var(--tu-gold);
    color: var(--tu-gold);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), opacity .18s ease, box-shadow .18s ease;
}
.tellus.is-left .tellus-bubble { right: auto; left: var(--tu-x); }
.tellus-bubble:hover { transform: scale(1.05); }
.tellus-bubble:focus-visible { outline: 3px solid var(--tu-gold); outline-offset: 3px; }
.tellus.is-dragging .tellus-bubble { transition: none; transform: scale(1.08); cursor: grabbing; box-shadow: 0 14px 32px rgba(10, 26, 63, .45), 0 0 0 2px var(--tu-gold); }
.tellus.is-open .tellus-bubble { transform: scale(.6); opacity: 0; pointer-events: none; }
.tellus-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: tellus-spin 24s linear infinite; }
.tellus-ring text { fill: var(--tu-gold); font-family: Archivo, Manrope, system-ui, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .4px; }
.tellus-mark { position: absolute; left: 50%; top: 50%; width: 22px; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
@keyframes tellus-spin { to { transform: rotate(360deg); } }

/* The box. Grows from the bubble's corner. */
.tellus-panel {
    position: fixed;
    right: var(--tu-x);
    bottom: calc(var(--tu-y) + var(--tu-bar));
    width: min(340px, calc(100vw - 32px));
    max-height: calc(100vh - var(--tu-bar) - 32px);
    overflow: auto;
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    color: var(--tu-ink);
    box-shadow: 0 20px 48px rgba(10, 26, 63, .28), 0 0 0 1px rgba(10, 26, 63, .08);
    transform-origin: bottom right;
    animation: tellus-in .22s cubic-bezier(.16, 1, .3, 1);
}
.tellus.is-left .tellus-panel { right: auto; left: var(--tu-x); transform-origin: bottom left; }
.tellus.is-closing .tellus-panel { animation: tellus-out .2s cubic-bezier(.7, 0, .84, 0) forwards; }
@keyframes tellus-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes tellus-out { to { opacity: 0; transform: scale(.3); } }
.tellus-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.tellus-h { margin: 0; font-family: Archivo, Manrope, system-ui, sans-serif; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--tu-navy); outline: none; }
.tellus-close { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -4px -4px 0 0; border: 0; border-radius: 50%; background: transparent; color: #5B6478; cursor: pointer; }
.tellus-close:hover, .tellus-close:focus-visible { background: #F1F3F7; color: var(--tu-navy); }
.tellus-kinds { display: flex; gap: 6px; margin: 0 0 10px; padding: 0; border: 0; }
.tellus-kinds label { flex: 1 1 0; margin: 0; }
.tellus-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.tellus-kinds span { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 4px; border: 1px solid var(--tu-line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--tu-navy); cursor: pointer; white-space: nowrap; }
.tellus-kinds input:checked + span { border-color: var(--tu-navy); background: var(--tu-navy); color: #fff; }
.tellus-kinds input:focus-visible + span { outline: 3px solid var(--tu-gold); outline-offset: 2px; }
.tellus-form textarea, .tellus-guest input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #CBD2DE;
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    color: var(--tu-ink);
    background: #fff;
}
.tellus-form textarea { min-height: 104px; resize: vertical; }
.tellus-form textarea:focus, .tellus-guest input:focus { outline: none; border-color: var(--tu-navy); box-shadow: 0 0 0 3px rgba(255, 216, 0, .55); }
.tellus-count { margin: 4px 2px 0; font-size: 12px; color: #5B6478; text-align: end; }
.tellus-guest { display: grid; gap: 4px; margin-top: 10px; }
.tellus-guest label { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--tu-navy); }
.tellus-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tellus-captcha { margin-top: 10px; }
.tellus-err { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #B42318; }
.tellus-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.tellus-send { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--tu-gold); color: var(--tu-navy); font-weight: 800; font-size: 15px; cursor: pointer; }
.tellus-send:hover { filter: brightness(.96); }
.tellus-send:focus-visible { outline: 3px solid var(--tu-navy); outline-offset: 2px; }
.tellus-send[disabled] { opacity: .6; cursor: default; }
.tellus-restore { min-height: 32px; padding: 0; border: 0; background: none; color: var(--tu-navy); font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.tellus-thanks { margin: 8px 0 4px; font-size: 16px; font-weight: 700; color: var(--tu-navy); text-align: center; }

/* The ✕ that appears while dragging: drop the bubble on it to hide it. */
.tellus-drop {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--tu-bar));
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    border-radius: 50%;
    background: rgba(10, 26, 63, .82);
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s cubic-bezier(.16, 1, .3, 1), background-color .18s ease;
}
.tellus.is-dragging .tellus-drop { opacity: 1; transform: scale(1); }
.tellus.is-over-drop .tellus-drop { background: #B42318; transform: scale(1.15); }

/* The note after hiding, and the glow on the menu that now holds "Tell us". */
.tellus-toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + var(--tu-bar));
    width: max-content;
    max-width: calc(100vw - 32px);
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--tu-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 12px 32px rgba(10, 26, 63, .35);
    transform: translateX(-50%);
    animation: tellus-toast-in .25s cubic-bezier(.16, 1, .3, 1);
}
@keyframes tellus-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.tellus-glow { border-radius: 999px; animation: tellus-glow 1s ease-in-out 4; }
@keyframes tellus-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 0, 0); }
    50% { box-shadow: 0 0 0 4px rgba(255, 216, 0, .95), 0 0 18px 4px rgba(255, 216, 0, .6); }
}

/* Right to left: the default corner is the left. */
[dir="rtl"] .tellus:not(.is-right):not(.is-left) .tellus-bubble,
[dir="rtl"] .tellus:not(.is-right):not(.is-left) .tellus-panel { right: auto; left: var(--tu-x); transform-origin: bottom left; }

@media (prefers-reduced-motion: reduce) {
    .tellus-ring { animation: none; }
    .tellus-panel, .tellus.is-closing .tellus-panel, .tellus-toast, .tellus-glow { animation: none; }
    .tellus-bubble, .tellus-drop { transition: none; }
}
@media print { .tellus { display: none !important; } }

/* LOCAL (see PATCHES.md patch 264): on a phone the bubble sits over the last
   80px of the screen, so at the end of a page it covered the footer's last
   line (the copyright line, patch 327) on the front page and /pricing.
   The site footer ends with room for it: 104px, the same room patch 261 left
   at the end of the athlete page. Only while the bubble is showing - this file
   loads only where it can - and only under 576px, where it overlaps. The
   footer's own py-5 is !important in Bootstrap, hence the !important here. */
@media (max-width: 575.98px) {
    body:has(.tellus:not([hidden])) footer.footer { padding-bottom: 104px !important; }
}

/* LOCAL (see PATCHES.md patch 324): on a phone the bubble sits over the last ~80px
   on the right, above the app's bottom bar; every signed-in page (settings, the
   roster, feedback, the school settings) ended with a Save or Send button under
   it. The app layout's body already clears the bar (70px); while the bubble
   shows, it clears the bubble too. */
@media (max-width: 767.98px) {
    body.has-mobile-bottom-nav:has(.tellus.tellus--bar:not([hidden])) { padding-bottom: calc(166px + env(safe-area-inset-bottom, 0px)); }
}

/* LOCAL (see PATCHES.md patch 407): on a phone the 64px bubble, 16px in from the edge,
   covered the last 80px of every line under it (the founding-coach price line on
   /for-coaches, form text). On a phone it is smaller (56px) and tucked a fifth behind
   the screen's edge, so it covers about the page's own 16px margin and a few pixels
   of text, and its ring still turns past the visible part. Tapping or dragging it works
   as before; the box it opens sits 8px in from the edge. "Tell us" in the menu and the
   footer opens the same box. */
/* LOCAL (see PATCHES.md patch 421): this REPLACES the edge-tucking part of patch 407's
   phone rule. On a phone the bubble now shows WHOLE and exactly round: 52px, 10px from
   the edge, a little above the bottom (clear of the bottom bar and the home indicator),
   the logo dead centre (no margin shift on either side or right to left). Smaller, not
   hidden, is how it stays off the ends of lines. The ring's letters are a notch bigger
   so they stay readable at 52px. The box it opens is unchanged (8px in from the edge). */
@media (max-width: 575.98px) {
    .tellus { --tu-x: 10px; --tu-y: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .tellus--bar { --tu-y: 14px; }
    .tellus-bubble { width: 52px; height: 52px; }
    .tellus-mark { width: 18px; margin-left: 0; }
    .tellus-ring text { font-size: 11px; letter-spacing: .3px; }
    .tellus-panel { right: 8px; width: calc(100vw - 16px); }
    .tellus.is-left .tellus-panel,
    [dir="rtl"] .tellus:not(.is-right):not(.is-left) .tellus-panel { right: auto; left: 8px; }
    .tellus-bubble:hover { transform: none; }
}

/* LOCAL (see PATCHES.md patch 553): on a phone, while a button, a field or a button-styled
   link is under the bubble (the home page's tour button, the Send of Ask Onlyoss on /pricing,
   a booking form), public/js/float-aside.js adds .is-aside: the bubble fades out and lets taps
   through to what is under it. Scrolled on, it comes back. */
.tellus.is-aside .tellus-bubble { opacity: 0; pointer-events: none; } /* no transform: the script measures this box */