/*
 * ADVx components layer — shared component classes. During the migration the
 * legacy component families (nav-*, card-*, toast, cookie-*, footer, …) still
 * live in application.css (unlayered, so they win); they move here family by
 * family in the decomposition phase. This file starts with what PicoCSS used
 * to provide at the element level plus the new Radix-style components.
 */

@layer components {
    /* ── Nav (header/nav/ul idiom the navbar builds on) ── */
    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    nav ul {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    /* Each item is a flex box centering its child — inline-block children
       would otherwise sit on the text baseline, whose phantom descender
       space pushes items (worst: the logo) off the shared centerline. */
    nav li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: var(--advx-space-2);
    }
    /* The base layer's vertical rhythm gives form/details a bottom margin,
       which knocks nav items (Log Out's button_to form, the Profile
       dropdown) off the shared centerline. Nothing in a nav item wraps. */
    nav li > *,
    nav li a,
    nav li [role="button"] {
        margin-bottom: 0;
    }
    /* Pill links are a top-navbar treatment — header-scoped so the footer's
       and sidebar's own nav styles stay in charge of theirs. */
    header nav li a:not([role="button"]) {
        display: inline-block;
        padding: var(--advx-space-1) var(--advx-space-2);
        border-radius: var(--advx-radius-1);
        color: var(--advx-text-muted);
        font-weight: 500;
        text-decoration: none;
        transition:
            color var(--advx-transition),
            background-color var(--advx-transition);
    }
    header nav li a:not([role="button"]):hover {
        color: var(--advx-text);
        background-color: var(--gray-a3);
    }
    nav details.dropdown {
        display: inline-block;
    }
    nav details.dropdown > summary + ul {
        width: max-content;
    }
    /* Navbar menu (Profile) matches the button metrics beside it (Log Out) —
       the base dropdown summary is a size smaller. */
    header nav details.dropdown > summary:not([role]) {
        padding: var(--advx-space-2) var(--advx-space-3);
        font-size: var(--advx-text-3);
    }
    /* Nav controls never wrap their label; on phones the row runs out of
       room, so tighten the gaps instead of letting "Log Out" break in two. */
    nav li :is(button, [role="button"], summary) {
        white-space: nowrap;
    }
    @media (max-width: 480px) {
        nav li {
            padding: var(--advx-space-1);
        }
        header nav :is(button, [role="button"]) {
            padding-inline: var(--advx-space-3);
        }
        header nav details.dropdown > summary:not([role]) {
            padding-inline: var(--advx-space-2);
        }
    }
    /* vertical account nav (sidebar <aside><nav>) */
    aside nav,
    aside nav ul {
        display: block;
    }
    aside nav li {
        display: block;
        padding: 0;
    }
    aside nav li a {
        display: block;
    }

    /* ── Navbar bits ── */
    .nav-logo {
        width: 32px;
        height: 32px;
    }
    .theme-toggle {
        background: none;
        border: none;
        box-shadow: none;
        color: inherit;
        padding: var(--advx-space-2);
        margin: 0;
        line-height: 1;
        cursor: pointer;
    }
    .theme-toggle:hover {
        background-color: var(--gray-a3);
        color: inherit;
    }
    .theme-toggle .icon-moon {
        display: none;
    }
    html[data-theme="light"] .theme-toggle .icon-sun {
        display: none;
    }
    html[data-theme="light"] .theme-toggle .icon-moon {
        display: inline;
    }

    /* ── Account sidebar nav ── */
    aside > nav li a {
        display: block;
        color: var(--advx-text-muted);
        text-decoration: none;
        font-family: var(--advx-font-heading);
        font-weight: 500;
        letter-spacing: var(--advx-eyebrow-tracking);
        text-transform: var(--advx-eyebrow-transform);
        padding: var(--advx-space-3) var(--advx-space-2);
        border-radius: var(--advx-radius-1);
        transition:
            background-color var(--advx-transition),
            color var(--advx-transition);
    }
    aside > nav li a:hover,
    aside > nav li a:focus {
        background-color: var(--gray-a3);
        color: var(--advx-text);
        text-decoration: none;
    }
    aside > nav li a.active {
        color: var(--advx-accent-text);
        text-decoration: none;
    }

    /* ── Table row affordances ── */
    table tbody tr {
        transition: background-color var(--advx-transition);
    }
    table tbody tr:hover td,
    table tbody tr:hover th {
        background-color: var(--gray-a3);
    }
    table tbody tr td:first-child {
        border-left: 3px solid transparent;
        transition: border-color var(--advx-transition);
    }
    table tbody tr:hover td:first-child {
        border-left-color: var(--advx-accent);
    }

    /* ── Sidebar layout ── */
    .grid.grid-sidebar {
        display: grid;
        gap: var(--advx-space-4);
    }
    /* Inside the Hotwire Native app the account sidebar is not rendered on
       most pages, so the content must take the full width at any size. */
    body.hotwire-native .grid.grid-sidebar {
        grid-template-columns: 1fr;
    }

    /* ── Toasts ── */
    .toast-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: var(--advx-space-2);
        max-width: min(24rem, calc(100vw - 2rem));
        pointer-events: none;
    }
    .toast {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--advx-space-3);
        padding: var(--advx-space-3) var(--advx-space-4);
        border-radius: var(--advx-radius-2);
        background-color: var(--advx-surface);
        pointer-events: auto;
        box-shadow: var(--advx-shadow-3);
    }
    .toast-close {
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.25rem;
        line-height: 1;
        padding: 0;
        opacity: 0.7;
        color: inherit;
        margin: 0;
        width: auto;
    }
    .toast-close:hover {
        opacity: 1;
        background: none;
        color: inherit;
    }
    .toast-success {
        border: var(--advx-border-width) solid var(--advx-valid-border);
        color: light-dark(#2a7e3b, #71d083);
    }
    .toast-error {
        border: var(--advx-border-width) solid var(--advx-danger-border);
        color: var(--advx-danger);
    }
    @keyframes toast-fade-out {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-0.5rem);
        }
    }
    .toast-hiding {
        animation: toast-fade-out 0.3s ease-in forwards;
    }

    /* ── Page header (index + show toolbars) ── */
    [role="group"] > form {
        display: contents;
    }
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--advx-space-4);
        flex-wrap: wrap;
        margin-bottom: var(--advx-space-4);
        /* Match the action-button row height, so a title with buttons (the
           button centres it a few px down) and a title without them (Account
           Details, GPX Planner) sit at the same vertical position. */
        min-height: 2.625rem;
    }
    .page-header > h2,
    .page-header > hgroup {
        margin: 0;
    }
    .page-header > [role="group"] {
        width: auto;
        margin-bottom: 0;
    }
    /* Compact inline-list action buttons (Remove / Revoke / Leave, etc.) */
    .btn-sm {
        padding: 0.2rem 0.6rem;
        font-size: var(--advx-text-1);
    }

    /* Action-button row inside a page header (or an empty state). */
    .page-actions {
        display: flex;
        gap: var(--advx-space-2);
        flex-wrap: wrap;
    }

    /* Error summary above a form (shared/_form_errors). Announced via
       role=alert; this is only the look — the callout--danger treatment. */
    .form-errors {
        border: var(--advx-border-width) solid
            light-dark(#eb8e9080, #b5454880);
        border-radius: var(--advx-radius-2);
        background-color: light-dark(#e5484d14, #e5484d1f);
        padding: var(--advx-space-3) var(--advx-space-4);
        margin-bottom: var(--advx-space-4);
    }
    .form-errors h4 {
        margin-bottom: 0.4rem;
        color: var(--advx-danger);
    }
    .form-errors ul {
        margin: 0;
    }
    .form-errors :focus-visible {
        outline: 2px solid var(--advx-focus-ring);
        outline-offset: 2px;
    }

    /* ── Eyebrow / overline (uppercase brand accent) ── */
    .eyebrow {
        color: var(--advx-text-muted);
        font-size: var(--advx-text-1);
        font-weight: 600;
        letter-spacing: var(--advx-eyebrow-tracking);
        text-transform: var(--advx-eyebrow-transform);
    }

    /* ── Callout (form errors, flash-like notices, teasers) ── */
    .callout {
        display: flex;
        gap: var(--advx-space-3);
        margin-bottom: var(--advx-space-4);
        padding: var(--advx-space-3) var(--advx-space-4);
        border: var(--advx-border-width) solid var(--gray-a6);
        border-radius: var(--advx-radius-2);
        background-color: var(--gray-a2);
        color: var(--advx-text);
        font-size: var(--advx-text-2);
    }
    .callout > :last-child {
        margin-bottom: 0;
    }
    .callout--accent {
        border-color: var(--amber-a6);
        background-color: var(--amber-a2);
        color: var(--advx-accent-text);
    }
    .callout--danger {
        border-color: light-dark(#eb8e9080, #b5454880);
        background-color: light-dark(#e5484d14, #e5484d1f);
        color: var(--advx-danger);
    }
    .callout--danger a {
        color: inherit;
        text-decoration-color: currentColor;
    }

    /* ── Toolbar (Radix Toolbar look: subtle surface, ghost icon buttons,
         hairline separators). Pair with role="group" + an aria-label. ── */
    .toolbar {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: var(--advx-space-1);
        border: var(--advx-border-width) solid var(--advx-border);
        border-radius: var(--advx-radius-2);
        background-color: var(--gray-a2);
        /* not the role=group action-row margin — a toolbar inside a flex row
           (planner) would be pushed off the shared centerline by it */
        margin-bottom: 0;
    }
    .toolbar :is(button, [role="button"]) {
        padding: var(--advx-space-2);
        min-width: 2.25rem;
        border: none;
        border-radius: var(--advx-radius-1);
        background-color: transparent;
        color: var(--advx-text-muted);
        font-size: var(--advx-text-2);
        line-height: 1;
    }
    .toolbar :is(button, [role="button"]) svg {
        width: 1.125rem;
        height: 1.125rem;
    }
    .toolbar :is(button, [role="button"]):hover {
        background-color: var(--gray-a3);
        color: var(--advx-text);
    }
    .toolbar :is(button, [role="button"])[aria-pressed="true"] {
        background-color: var(--amber-a4);
        color: var(--advx-accent-text);
    }
    /* the one loud action a toolbar may carry (e.g. Save to Library) */
    .toolbar :is(button, [role="button"]).primary {
        padding-inline: var(--advx-space-3);
        background-color: var(--advx-accent);
        color: var(--advx-accent-contrast);
        font-weight: 500;
    }
    .toolbar :is(button, [role="button"]).primary:hover {
        background-color: var(--advx-accent-hover);
    }
    /* destructive affordance colors on approach, not at rest */
    .toolbar .danger:hover {
        background-color: light-dark(#e5484d14, #e5484d26);
        color: var(--advx-danger);
    }
    .toolbar-sep {
        align-self: stretch;
        width: var(--advx-border-width);
        margin-inline: var(--advx-space-1);
        background-color: var(--advx-border);
    }

    /* ── Segmented control (filter tabs, view toggles) ── */
    .segmented {
        display: inline-flex;
        padding: var(--advx-space-1);
        border: var(--advx-border-width) solid var(--advx-border);
        border-radius: var(--advx-radius-2);
        background-color: var(--gray-a2);
    }
    .segmented :is(a, button) {
        margin: 0;
        padding: var(--advx-space-1) var(--advx-space-3);
        border: none;
        border-radius: var(--advx-radius-1);
        background: none;
        color: var(--advx-text-muted);
        font-size: var(--advx-text-2);
        font-weight: 500;
        text-decoration: none;
        transition:
            background-color var(--advx-transition),
            color var(--advx-transition);
    }
    .segmented :is(a, button):hover {
        color: var(--advx-text);
        background: none;
    }
    .segmented :is(a, button)[aria-current],
    .segmented :is(a, button)[aria-pressed="true"] {
        background-color: light-dark(#ffffff, var(--gray-5));
        border: none;
        box-shadow: var(--advx-shadow-1);
        color: var(--advx-text);
    }

    /* ── Muted text (replaces the repeated inline muted-color styles) ── */
    .muted {
        color: var(--advx-text-muted);
    }

    /* ── Screen-reader-only text (headings for self-evident sections) ── */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* ── Card grid (auto-fill card lists: gpx cards, profile grids) ── */
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: var(--advx-space-4);
    }

    /* ── Empty state ── */
    .empty-state {
        padding: var(--advx-space-7) var(--advx-space-5);
        text-align: center;
    }
    .empty-state > p {
        margin-inline: auto;
        max-width: 34rem;
        color: var(--advx-text-muted);
    }

    /* ── Stat grid (replaces the inline repeat(3,1fr) blocks; collapses on
         phones, which the inline version never did) ── */
    .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
        gap: var(--advx-space-3);
        margin-bottom: var(--advx-space-4);
    }
    .stat-grid > article {
        margin: 0;
        padding: var(--advx-space-4);
        text-align: center;
    }
    .stat-grid > article strong {
        font-family: var(--advx-font-heading);
        font-size: var(--advx-text-5);
        font-weight: 600;
        line-height: 1.2;
    }
    .stat-grid > article small {
        color: var(--advx-text-muted);
        font-size: var(--advx-text-1);
        font-weight: 600;
        letter-spacing: var(--advx-eyebrow-tracking);
        text-transform: var(--advx-eyebrow-transform);
    }
}

@layer components {
/* ── Footer ── */
.site-footer {
    margin-top: 4rem;
    border-top: var(--advx-border-width) solid var(--advx-border);
    padding: 2.5rem 0 1.5rem;
    color: var(--advx-text-muted);
}

.site-footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.site-footer-brand a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--advx-text);
}

.site-footer-brand p {
    margin: 0;
    font-size: var(--advx-text-small);
}

.site-footer-nav {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.site-footer-nav > div {
    text-align: right;
}

.site-footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    align-items: flex-end;
}

.site-footer-nav li {
    padding: 0;
}

.site-footer-nav a {
    font-size: var(--advx-text-small);
    color: var(--advx-text-muted);
    text-decoration: none;
    padding: 0;
    margin: 0;
}

.site-footer-nav a:hover {
    color: var(--advx-text);
}

.site-footer-bottom {
    border-top: var(--advx-border-width) solid var(--advx-border);
    padding-top: 1rem;
}

/* ── Hamburger menu ── */
.nav-hamburger {
    display: none;
}

.nav-hamburger details > summary::after,
.nav-hamburger details > summary::marker,
.nav-hamburger details > summary::-webkit-details-marker {
    display: none;
    content: none;
}

.nav-hamburger details > summary {
    list-style: none;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .nav-desktop-link {
        display: none;
    }
    .nav-hamburger {
        display: flex;
        align-items: center;
    }
}

/* The Pro nav link reads as the upsell: amber accent wherever it appears
   (top navbar + account sidebar). */
.nav-pro {
    color: var(--advx-accent-text);
}

}

@layer components {
/* ── Card polish (profile track/waypoint/group cards) ───────────────────── */

.card-hover {
    /* Also the containing block for .card-link's overlay, below. */
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Whole-card click targets used to be an `onclick` on the <article>: no keyboard
   focus, no cmd-click, and invisible to a screen reader as navigation. The card
   now carries a real anchor on its title, stretched over the card by this
   overlay, so the mouse target is unchanged but the link is a link. */
.card-link {
    color: inherit;
    text-decoration: none;
}

/* Scoped to .card-hover: a bare .card-link (e.g. a table-row title) must stay
   a plain link — unanchored, this overlay's containing block is the viewport
   and it silently blankets the whole page. */
.card-hover .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* Anything interactive inside the card has to sit above that overlay. */
.card-actions {
    position: relative;
}

/* The focus ring belongs on the whole card, not the two lines of title text. */
.card-hover:has(.card-link:focus-visible) {
    outline: 2px solid var(--advx-accent-text);
    outline-offset: 2px;
}

.card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.card-thumb {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease;
}

.card-hover:hover .card-thumb {
    transform: scale(1.03);
}

/* .card-thumb-map positioning lives in advx/overrides.css — it must beat
   maplibre-gl.css's unlayered `.maplibregl-map { position: relative }`,
   which any layered rule here cannot. */

/* Full-bleed images (group pictures) — but never the small photo chip,
   which this child rule would otherwise out-rank and inflate. */
.card-thumb > img:not(.thumb-photo-chip) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-photo-chip {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: calc(var(--advx-radius-2) * 0.75);
    border: 2px solid var(--advx-bg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Card titles occupy exactly two lines — clamped above, reserved below —
   so title length never changes a card's height. */
.card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.6em;
}

.badge {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    line-height: 1.5;
    border: 1px solid var(--advx-border);
    border-radius: 1em;
    color: var(--advx-text-muted);
    white-space: nowrap;
}

/* The reset's block-level svg would break an inline icon onto its own line. */
.badge svg {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .card-hover,
    .card-thumb {
        transition: none;
    }

    .card-hover:hover {
        transform: none;
    }

    .card-hover:hover .card-thumb {
        transform: none;
    }
}

.avatar-camera-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--advx-transition);
    pointer-events: none;
}

button.avatar-wrap:hover .avatar-camera-overlay {
    opacity: 1;
}

/* Touch devices: no hover, show a small badge in the corner instead */
@media (hover: none) {
    .avatar-camera-overlay {
        inset: auto;
        bottom: 0;
        right: 0;
        width: 1.8rem;
        height: 1.8rem;
        opacity: 1;
        background: var(--advx-accent);
    }

    .avatar-camera-overlay svg {
        width: 14px;
        height: 14px;
    }
}

.gpx-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem var(--advx-space-4);
    margin: 0;
}

.gpx-details dt {
    color: var(--advx-text-muted);
    font-size: var(--advx-text-small);
    align-self: center;
}

.gpx-details dd {
    margin: 0;
}

@media (min-width: 768px) {
    .grid.grid-sidebar {
        grid-template-columns: 1fr 4fr;
    }

    .hide-on-desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}

.groups-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--advx-space-4);
}

.groups-grid > a {
    text-decoration: none;
    color: inherit;
}

.groups-grid a > article {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border-bottom: 4px solid transparent;
    transition:
        background-color var(--advx-transition),
        border-color var(--advx-transition);
}

.groups-grid a:hover > article {
    background-color: var(--gray-5);
    border-bottom-color: var(--advx-accent-text-hover);
}

.groups-grid a > article img {
    width: 100%;
    /* Square card image: shows most of any logo at a consistent size instead
       of the arbitrary wide strip a fixed height used to crop it to. */
    aspect-ratio: 1;
    display: block;
    object-fit: cover;
    flex-shrink: 0;
}

.groups-grid .card-body {
    padding: var(--advx-space-4);
}

@media (max-width: 900px) {
    .groups-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .groups-grid {
        grid-template-columns: 1fr;
    }
}

}

@layer components {
/* ── Cookie Consent Popup ── */
.cookie-popup {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 9999;
    width: 360px;
    background-color: var(--advx-surface);
    border: var(--advx-border-width) solid var(--advx-border);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.cookie-popup-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1.25rem 0.6rem;
    color: var(--advx-accent-text);
}

.cookie-popup-header strong {
    font-size: 1rem;
}

.cookie-popup-body {
    padding: 0 1.25rem 1.25rem;
}

.cookie-popup-body p {
    font-size: var(--advx-text-small);
    color: var(--advx-text-muted);
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.cookie-popup-body > small {
    display: block;
    color: var(--advx-text-muted);
    margin-bottom: 1rem;
}

.cookie-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cookie-popup-actions button {
    margin: 0;
    width: 100%;
}

.cookie-manage-link {
    font-size: var(--advx-text-small);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.cookie-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

.cookie-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: var(--advx-border-width) solid var(--advx-border);
    cursor: pointer;
    margin: 0;
}

.cookie-category:last-child {
    border-bottom: none;
}

.cookie-category-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.cookie-category-info strong {
    font-size: var(--advx-text-small);
}

.cookie-category-info small {
    color: var(--advx-text-muted);
    line-height: 1.4;
}

.cookie-category input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

@media (max-width: 480px) {
    .cookie-popup {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }
}

}