/* Profile page (UI-14). Layout and colour are Tailwind utilities in
   templates/timetable/profile.html; here is only what a utility cannot say.
   Dark mode is in dark-mode.css under "Profile page". */

/* A section: room above it, a hairline between it and the one before, and a
   landing spot below the fixed navbar when the menu jumps to it. */
.profile-section {
    scroll-margin-top: 7rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* On a phone the menu row sticks under the navbar too (UI-39), so a section
   lands below both: the navbar is 82px there and the row about 57px. */
@media (max-width: 1023px) {
    .profile-section {
        scroll-margin-top: 9.5rem;
    }
}

/* The danger zone draws its own red outline (utilities), on all four sides. */
#danger-zone.profile-section {
    margin-bottom: 0;
    padding-bottom: 1.5rem;
    border-bottom-color: #fecaca;
}

/* The menu. A column that follows the screen on a wide display; a row that
   scrolls sideways on a phone, so five links never wrap into three lines, and
   that sticks under the navbar there too (UI-39). */
.profile-menu {
    scrollbar-width: none;
}

.profile-menu::-webkit-scrollbar {
    display: none;
}

.profile-menu__link {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 0.625rem;
    border-left: 3px solid transparent;
    color: #4b5563;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.profile-menu__link:hover {
    color: #111827;
    background: #f3f4f6;
}

/* The section on screen (pages/profile.js sets aria-current). */
.profile-menu__link[aria-current="true"] {
    color: #111827;
    background: #ffffff;
    border-left-color: #0b1f33;
}

/* A palette slot is painted by the script: background from its colour input,
   text from domain/contrast.js. The fallback here is what shows before that
   and with no script. */
.palette-slot {
    background: #ffffff;
    color: #1f2937;
    transition: background-color 0.15s ease;
}

.palette-slot input[type="color"] {
    padding: 0;
    background: transparent;
}

/* The save bar: above the page, a soft edge so it reads as a layer. It has no
   transition and no animation on purpose: it must be there the instant a
   field changes (the old Save button faded in 1.2 s late). */
.profile-save-bar {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu__link,
    .palette-slot {
        transition: none;
    }
}