/* ==========================================================================
   YTAC shared styles — loaded on every page through
   templates/partials/head_assets.html. Page-only rules live in their own
   file (e.g. register.css).

   Rules here are unlayered, so they win over Tailwind utilities.
   ========================================================================== */

/* Brand tokens. head_assets.html maps these to Tailwind utilities
   (text-ytac-blue, bg-ytac2027-Blue, font-heading...), so change a colour
   here and both the utilities and this file follow. */
:root {
    --ytac-blue: #00607A;
    --ytac-green: #14A39A;
    --ytac-purple: #822384;
    --ytac-mint: #84D4C7;
    --ytac2027-blue: #0E4F7A;
    --ytac2027-yellow: #E5D245;
    /* "Light-speed" hero palette: royal blue base, sky/ice streaks, sun-yellow bands */
    --ytac2027-navy: #0A2A6B;
    --ytac2027-royal: #0B45B5;
    --ytac2027-sky: #3DB6F5;
    --ytac2027-ice: #C2ECFF;
    --ytac2027-sun: #F7D61B;

    --ytac-font-sans: 'Plus Jakarta Sans', sans-serif;
    --ytac-font-heading: 'Space Grotesk', sans-serif;
}

body {
    font-family: var(--ytac-font-sans);
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--ytac-purple);
    outline-offset: 3px;
}

/* --- Form fields --- */

.field-label {
    font-family: var(--ytac-font-heading);
}

.field-input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:focus {
    outline: none;
    border-color: var(--ytac-blue);
    box-shadow: 0 0 0 3px rgba(0, 96, 122, 0.12);
}

/* Selectable cards: <label class="category-option"><input class="sr-only">
   <div class="category-option-card">…</div></label> */
.category-option input:checked + .category-option-card {
    border-color: var(--ytac-blue);
    background: rgba(0, 96, 122, 0.05);
    box-shadow: 0 0 0 2px var(--ytac-blue);
}

/* Shown / hidden by JS adding .is-visible */
.hint-panel,
.conditional-block {
    display: none;
}

.hint-panel.is-visible,
.conditional-block.is-visible {
    display: block;
}

/* --- Status message (YTAC.setStatus in base.js sets data-tone) --- */

.status-message {
    padding: 0.75rem 1rem;
    border: 1px solid #dceeed;
    border-radius: 0.75rem;
    background: #f0f8f8;
    color: var(--ytac-blue);
    font-size: 0.875rem;
}

.status-message[data-tone="error"] {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.status-message[data-tone="success"] {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

/* --- Modal dialog (open with data-dialog-open, see base.js) --- */

.ytac-dialog {
    width: calc(100% - 2rem);
    max-width: 28rem;
    max-height: calc(100dvh - 2rem);
    margin: auto; /* Tailwind's reset removes the browser's centring */
    padding: 0;
    overflow: auto;
    border: 1px solid #e4ecef;
    border-radius: 1.5rem;
    box-shadow: 0 24px 90px rgba(0, 61, 80, 0.2);
    color: #334155;
}

.ytac-dialog::backdrop {
    background: rgba(0, 49, 63, 0.5);
    backdrop-filter: blur(4px);
}

/* 16px text stops iOS zooming into fields on focus */
@media screen and (max-width: 1023px) {
    .field-input {
        min-width: 0;
        max-width: 100%;
        font-size: 1rem;
    }
}

/* --- Participant portal: competition phase badges (base.html nav_link, competition pages) --- */

.nav-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* "Incoming": a light sweeping across the badge */
.nav-pill-incoming {
    color: var(--ytac2027-navy);
    background: linear-gradient(110deg, var(--ytac2027-sun) 35%, #fff6c9 50%, var(--ytac2027-sun) 65%);
    background-size: 250% 100%;
    animation: pill-sweep 2.4s linear infinite;
}

/* "NOW": red, with a pulsing live dot */
.nav-pill-now {
    color: #fff;
    background: #e11d48;
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55);
    animation: pill-ring 1.6s ease-out infinite;
}

.nav-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: pill-blink 1s steps(2, start) infinite;
}

@keyframes pill-sweep { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes pill-ring { to { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); } }
@keyframes pill-blink { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
    .nav-pill-incoming, .nav-pill-now, .nav-pill-dot { animation: none; }
}

/* --- Competition hero (partials/competition_hero.html) --- */

/* "INCOMING": a sweep of light across the letters, with a radar ping beside them */
.comp-incoming {
    background: linear-gradient(100deg, #ffffff 30%, var(--ytac2027-sun) 50%, #ffffff 70%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: pill-sweep 2.8s linear infinite;
}

.comp-radar {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.comp-radar span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ytac2027-sun);
    animation: radar 2.4s ease-out infinite;
    opacity: 0;
}

.comp-radar span:nth-child(2) { animation-delay: 0.8s; }
.comp-radar span:nth-child(3) { animation-delay: 1.6s; }

.comp-radar::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--ytac2027-sun);
}

@keyframes radar {
    0% { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* "Competition NOW": a glowing card with a live dot */
.comp-now {
    animation: pill-ring 1.8s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55);
}

.comp-live {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    animation: live-dot 1.2s ease-out infinite;
}

@keyframes live-dot { to { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } }

@media (prefers-reduced-motion: reduce) {
    .comp-incoming, .comp-radar span, .comp-now, .comp-live { animation: none; }
    .comp-radar span:first-child { opacity: 1; }
}

/* --- Phone web app (base.html): bottom bar, press-and-hold sheets, portrait only --- */

@media (max-width: 1023px) {
    /* Room for the bottom bar (and the iPhone home indicator) under the page */
    .panel-main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

.phone-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 45;
    display: none;   /* Phones and tablets only (below) */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0.375rem 0.375rem calc(0.375rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid #e5edf0;
    box-shadow: 0 -8px 30px rgba(0, 49, 63, 0.08);
}

@media (max-width: 1023px) {
    .phone-bar { display: grid; }
}

.phone-bar-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 3.25rem;
    border-radius: 0.875rem;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    -webkit-touch-callout: none;   /* No iOS link menu on press and hold */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.phone-bar-button i { font-size: 1.15rem; }
.phone-bar-button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.125rem; }
.phone-bar-button[aria-current="page"] { color: var(--ytac-blue); background: rgba(0, 94, 120, 0.08); }
.phone-bar-button.is-pressing { transform: scale(0.94); background: rgba(0, 94, 120, 0.12); transition: transform 0.4s; }

/* Small mark: this button has more pages (press and hold) */
.phone-bar-more {
    position: absolute;
    top: 0.4rem;
    left: 50%;
    width: 1.1rem;
    height: 0.2rem;
    margin-left: -0.55rem;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.25;
}

.phone-bar-badge {
    position: absolute;
    top: 0.2rem;
    right: 18%;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #e11d48;
    color: #fff;
    font-size: 9.5px;
    line-height: 1.1rem;
}

.phone-bar-live { animation: pill-ring 1.6s ease-out infinite; box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.55); }
.phone-bar-soon { min-width: 0.6rem; width: 0.6rem; height: 0.6rem; padding: 0; top: 0.5rem; background: var(--ytac2027-sun); }

.phone-sheet { position: fixed; inset: 0; z-index: 60; }

/* No text selection or iOS link menu in the bar and sheets: a press and hold must not select "Close" etc. */
.phone-bar, .phone-sheet {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Opened by a press and hold: the whole sheet (backdrop too) ignores that finger until just after it lifts
   (base.html: open). The release tap then reaches the bar button underneath, which ignores it after a hold. */
.phone-sheet.is-arming { pointer-events: none; }
.phone-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 49, 63, 0.45); backdrop-filter: blur(3px); animation: sheet-fade 0.2s; }

.phone-sheet-panel {
    position: absolute;
    inset: auto 0 0 0;
    max-height: 80dvh;
    overflow-y: auto;
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
    border-radius: 1.5rem 1.5rem 0 0;
    background: #fff;
    box-shadow: 0 -20px 60px rgba(0, 49, 63, 0.25);
    animation: sheet-up 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.phone-sheet-grip { display: block; width: 2.5rem; height: 0.3rem; margin: 0 auto 0.25rem; border-radius: 999px; background: #d6dee2; }

.phone-sheet-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.85rem 0.25rem;
    border-radius: 1rem;
    border: 1px solid #edf2f4;
    color: var(--ytac-blue);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.phone-sheet-item i { font-size: 1.2rem; }
.phone-sheet-item[aria-current="page"] { background: rgba(0, 94, 120, 0.08); border-color: rgba(0, 94, 120, 0.3); }

.phone-tip {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(5.25rem + env(safe-area-inset-bottom));
    z-index: 46;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: var(--ytac2027-navy);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-fade { from { opacity: 0; } }

/* Portrait only: a phone held sideways (short and touch-only) gets a "turn it upright" cover */
.rotate-hint { display: none; }

@media (orientation: landscape) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
    .rotate-hint {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1.5rem;
        background: linear-gradient(160deg, var(--ytac2027-navy), var(--ytac-blue));
        color: #fff;
        text-align: center;
    }

    .rotate-hint i { font-size: 2.75rem; margin-bottom: 0.5rem; animation: rotate-back 2s ease-in-out infinite; }
}

@keyframes rotate-back {
    0%, 30% { transform: rotate(-90deg); }
    60%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .phone-sheet-panel, .phone-sheet-backdrop, .phone-bar-live, .rotate-hint i { animation: none; }
}

/* --- Form fields never wider than their box (phones) --- */
.field-input { min-width: 0; max-width: 100%; }

/* iPhone / iPad Safari: date and time boxes have a minimum natural width (they pushed forms past the screen
   edge) and centre their text; let them shrink and align left like the other fields. */
@supports (-webkit-touch-callout: none) {
    input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
        max-width: 100%;
        min-height: 2.875rem;
    }
}
::-webkit-date-and-time-value { text-align: left; }

/* File pickers, dropdowns and fieldsets shrink to their box on small phones (a fieldset's default min-width is
   its content, which pushed whole forms past the screen edge). */
input[type="file"], select { max-width: 100%; min-width: 0; }
fieldset { min-width: 0; }

/* Safety net: content wider than the screen is cut at the edge instead of widening the page (a wider page makes
   phones zoom out, which pushed the bottom bar out of view). Scrolling tables keep their own overflow-x-auto box. */
.panel-main { min-width: 0; overflow-x: clip; }