/* Shared finish. Keep the established fixed-width layout and report typography. */
:root {
    --ffo-control-radius: 5px;
    --ffo-motion-fast: 100ms;
    --ffo-motion-normal: 170ms;
    --ffo-motion-ease: cubic-bezier(.2, .7, .2, 1);
    --ffo-control-line: rgba(185, 204, 232, .27);
    --ffo-sticky-offset: 84px;
}

/* Movement is limited to interactive controls, never text reports or badges. */
.site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
    .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
    .tools-calendar, .club-card) {
    transition: transform var(--ffo-motion-fast) var(--ffo-motion-ease),
        background-color var(--ffo-motion-normal) ease,
        border-color var(--ffo-motion-normal) ease,
        color var(--ffo-motion-normal) ease,
        box-shadow var(--ffo-motion-normal) ease;
    -webkit-tap-highlight-color: rgba(240, 197, 69, .14);
}

.site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
    .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
    .tools-calendar, .club-card):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px) scale(.985);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18);
}

.site-nav__link {
    transition: color var(--ffo-motion-normal) ease, background-color var(--ffo-motion-normal) ease;
}
.site-shell :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ffo-gold);
    outline-offset: 3px;
    scroll-margin-top: var(--ffo-sticky-offset);
}
.site-content :is(section[id], h1[id], h2[id]) { scroll-margin-top: var(--ffo-sticky-offset); }
.site-content button:disabled { cursor: not-allowed; }

/* Tool controls share a size and finish; monospaced sheet/report areas stay as-is. */
:is(.sheet-builder button, .sheet-checker-button) {
    min-height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--ffo-control-line);
    border-radius: var(--ffo-control-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.sheet-builder button,
.sheet-checker-button,
.sheet-checker-submit-link {
    background: var(--ffo-panel-soft);
    color: var(--ffo-text);
    border-color: var(--ffo-control-line);
}
.sheet-builder :is(#sb-check-final, #sb-submit, .sb-load button),
.sheet-checker-button--primary {
    background: var(--ffo-gold);
    color: #07111f;
    border-color: var(--ffo-gold-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 2px 5px rgba(0, 0, 0, .16);
}
.sheet-builder .sb-order .sb-remove {
    background: transparent;
    border-color: rgba(230, 134, 134, .28);
    color: #f2b2b2;
}
.sheet-builder .sb-condition button { min-height: 36px; padding: 8px 0; }

.sheet-builder :is(input:not([type="hidden"]), select),
.sheet-checker-panel :is(input[type="text"], input[type="email"], select),
.sheet-checker-submission :is(input, select) {
    min-height: 44px;
    height: auto;
    border: 1px solid var(--ffo-control-line);
    border-radius: var(--ffo-control-radius);
    padding: 11px 12px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    transition: border-color var(--ffo-motion-normal) ease, box-shadow var(--ffo-motion-normal) ease;
}
.sheet-builder :is(input, select):focus,
.sheet-checker-panel :is(input, select):focus {
    border-color: var(--ffo-gold);
    box-shadow: 0 0 0 3px rgba(240, 197, 69, .09);
}
.sheet-checker-panel label {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    line-height: 1.5;
}
.sheet-checker-heading h1 { font-size: 28px; font-weight: 700; text-transform: none; }
.sheet-checker-heading p { font-size: 14px; font-weight: 400; line-height: 1.6; }
.sheet-checker-panel h2 { font-size: 17px; font-weight: 700; text-transform: none; }
.sheet-checker-status { font-size: 13px; font-weight: 600; border-color: rgba(240, 197, 69, .3); border-radius: 4px; }
:is(.sb-panel, .sheet-checker-panel) {
    border-color: rgba(185, 204, 232, .14);
    border-radius: 6px;
    background: var(--ffo-panel);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 5px 15px rgba(0, 0, 0, .08);
}
.sheet-checker-panel { border-top-width: 1px; }
.sheet-checker-heading { border-radius: 6px; border-top-width: 2px; }
.sb-preview { top: var(--ffo-sticky-offset); }

/* Keep quick-link badges and their footprint; reveal what each slot is for. */
.personal-shortcut__main {
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px 20px;
    border: 1px solid transparent;
    border-radius: 6px;
}
.personal-shortcut__logo-wrap { height: 170px; }
.personal-shortcut__name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ffo-text-muted);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
}
.personal-shortcut__change { bottom: 3px; }
.personal-shortcut__select-button { border-radius: var(--ffo-control-radius); }
.home-recruitment__button, .join-page .join-button { border-radius: var(--ffo-control-radius); }
.club-tabs__button { transition: background-color var(--ffo-motion-normal) ease, color var(--ffo-motion-normal) ease, transform var(--ffo-motion-fast) var(--ffo-motion-ease); }

@media (hover: hover) and (pointer: fine) {
    .sheet-builder button:not(:disabled):hover,
    .sheet-checker-button:not(:disabled):hover {
        background: #1a2e47;
        border-color: rgba(240, 197, 69, .45);
        color: #fff;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 3px 8px rgba(0, 0, 0, .15);
    }
    .sheet-builder :is(#sb-check-final, #sb-submit, .sb-load button):not(:disabled):hover,
    .sheet-checker-button--primary:not(:disabled):hover {
        background: #f7d568;
        border-color: #f7d568;
        color: #07111f;
    }
    .personal-shortcut__main:hover {
        background: rgba(20, 36, 59, .45);
        border-color: rgba(185, 204, 232, .12);
    }
    .site-content :is(.tool-card, .tool-shortcut, .club-card):hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 4px 12px rgba(0, 0, 0, .12);
    }
}

/* More pronounced control depth and feedback throughout the main site. */
.site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
    .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
    .tools-calendar, .club-card, .matchday-tabs__item) {
    transition: transform 120ms var(--ffo-motion-ease), background-color 180ms ease,
        border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.site-content :is(.sheet-checker-button, .sheets-submit, .join-button, .home-recruitment__button),
.sheet-builder button {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 3px 0 rgba(0, 0, 0, .4), 0 6px 12px rgba(0, 0, 0, .2);
}
.sheet-builder :is(#sb-check-final, #sb-submit, .sb-load button),
.sheet-checker-button--primary,
.site-content :is(.sheets-submit, .join-button, .home-recruitment__button),
.personal-shortcut__select-button {
    background-image: linear-gradient(rgba(255, 255, 255, .13), rgba(0, 0, 0, .055));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #98751f, 0 7px 15px rgba(0, 0, 0, .22);
}
.site-content :is(.tool-card, .tool-shortcut, .tools-hub-card, .tools-calendar) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 3px 0 rgba(0, 0, 0, .16);
}
.site-nav__link::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 12px;
    height: 2px;
    background: var(--ffo-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 180ms var(--ffo-motion-ease);
}
.site-nav__link--active::before { display: none; }
.site-nav__link:focus-visible::before { transform: scaleX(1); }
.site-nav__link:active { background-color: rgba(240, 197, 69, .12); }

@media (hover: hover) and (pointer: fine) {
    .site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
        .home-recruitment__button):not(:disabled):not([aria-disabled="true"]):hover {
        transform: translateY(-2px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 0 rgba(0, 0, 0, .35), 0 9px 18px rgba(0, 0, 0, .24);
    }
    .sheet-builder :is(#sb-check-final, #sb-submit, .sb-load button):not(:disabled):hover,
    .sheet-checker-button--primary:not(:disabled):hover,
    .site-content :is(.sheets-submit, .join-button, .home-recruitment__button):hover {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #98751f, 0 10px 20px rgba(0, 0, 0, .25);
    }
    .site-content :is(.tool-card, .tool-shortcut, .tools-hub-card, .tools-calendar, .club-card):hover {
        transform: translateY(-3px);
        border-color: rgba(240, 197, 69, .55);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 9px 22px rgba(0, 0, 0, .27);
    }
    .site-content :is(.club-tabs__button, .matchday-tabs__item):not(:disabled):hover {
        color: var(--ffo-gold);
        background-color: #182b43;
        transform: translateY(-1px);
        box-shadow: inset 0 -2px 0 rgba(240, 197, 69, .65);
    }
    .site-nav__link:hover { background-color: rgba(240, 197, 69, .075); color: var(--ffo-gold); }
    .site-nav__link:hover::before { transform: scaleX(1); }
    .site-content .personal-shortcut__main:hover {
        transform: translateY(-2px);
        border-color: rgba(240, 197, 69, .32);
        background-color: #101e31;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 7px 18px rgba(0, 0, 0, .2);
    }
}

/* These follow hover rules so a held button visibly sinks instead of lifting. */
.site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
    .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
    .tools-calendar, .club-card, .matchday-tabs__item):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(3px) scale(.97);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .23), 0 1px 0 rgba(0, 0, 0, .4);
}
.sheet-builder :is(#sb-check-final, #sb-submit, .sb-load button):not(:disabled):active,
.sheet-checker-button--primary:not(:disabled):active {
    transform: translateY(3px) scale(.97);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18), 0 1px 0 #98751f;
}
.personal-shortcut__main:active .personal-shortcut__select-button {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18), 0 1px 0 #98751f;
}

@media (prefers-reduced-motion: reduce) {
    .site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
        .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
        .tools-calendar, .club-card, input, select),
    .site-nav__link, .site-nav__link::before, .personal-shortcut__logo,
    .matchday-tabs__item {
        transition: none !important;
    }
    .site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
        .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
        .tools-calendar, .club-card):active,
    .site-content :is(button, .sheet-checker-button, .sheets-submit, .join-button,
        .home-recruitment__button, .tool-card, .tool-shortcut, .tools-hub-card,
        .tools-calendar, .club-card, .matchday-tabs__item):hover,
    .site-content .sheet-builder :is(#sb-check-final, #sb-submit, .sb-load button):active,
    .site-content .sheet-checker-button--primary:active,
    .site-content .matchday-tabs__item:active,
    .tools-hub-card:hover, .personal-shortcut:hover .personal-shortcut__logo {
        transform: none !important;
    }
}