:root {
    --bg: #faf7f5;
    --panel: #ffffff;
    --ink: #2a2330;
    --muted: #7a7080;
    --line: #ebe4dd;
    --accent: #c83205;          /* matches the wordmark red */
    --accent-soft: #ffe0d2;     /* warm peach tint for hover backgrounds */
    --accent-dark: #8a2200;     /* deeper rust for hover text */
    --ok: #2e8b57;
    --danger: #b3261e;
    --shadow: 0 2px 8px rgba(58,30,50,0.06);
    --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.5;
}

/* Header / Nav */
.site-header {
    background: var(--panel);
    /* Thicker line + deeper shadow so the boundary between sticky header
       and scrolling content reads clearly when content slides underneath. */
    border-bottom: 2px solid var(--line);
    padding: 2px 28px;        /* tight vertical — the logo carries header height */
    display: flex;
    align-items: center;
    gap: 28px;
    box-shadow: 0 4px 12px rgba(58, 30, 50, 0.12);
    position: sticky;
    top: 0;
    z-index: 20;
}
.brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    /* Keep the old text styles around as fallback if the image fails. */
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.01em;
}
/* Three-segment header: cityscape left | wordmark centered | nav right.
   The wordmark sits in a flex-grow center column so it stays visually
   centered while the cityscape and nav anchor the edges. */
.brand-cityscape { flex: 0 0 auto; }
.brand-wordmark  {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;        /* let the image shrink without pushing the nav */
}
.brand-cityscape a,
.brand-wordmark  a { display: inline-flex; align-items: center; }

.brand-logo-cityscape {
    /* Skyline+heart subimage is cropped tight — no whitespace tricks needed. */
    height: 96px;
    width: auto;
    display: block;
}
.brand-logo-wordmark {
    /* Wide wordmark is ~4.5:1 — cap by height. Width auto-scales and
       parent flex-shrink keeps the nav from getting pushed off. */
    height: 96px;
    width: auto;
    max-width: 100%;
    display: block;
}
@media (max-width: 1100px) {
    /* Less room for both logos AND the nav — shrink everything proportionally. */
    .brand-logo-cityscape,
    .brand-logo-wordmark { height: 72px; }
}
@media (max-width: 800px) {
    /* On mobile we want the cityscape + wordmark CENTERED as a pair
       above the wrapped nav row. The desktop layout pushes the wordmark
       into a flex-grow center column (good for left-anchor/right-anchor);
       on mobile we override that so both brand pieces shrink to content
       width and the header's justify-content centers them as a group. */
    .site-header {
        justify-content: center;
        gap: 10px;
        padding: 4px 14px;
    }
    .brand-cityscape,
    .brand-wordmark {
        flex: 0 0 auto;     /* take content width — don't fight for space */
    }
    .brand-logo-cityscape { height: 44px; }
    .brand-logo-wordmark  {
        /* Match the cityscape height so the wordmark uses the available
           vertical space; the small "DATE IDEAS. REAL CONNECTIONS. RVA."
           subtitle is what drives the lower bound on readability. */
        height: 44px;
        max-width: 70vw;    /* still cap so it never crowds the right edge */
    }
    .site-nav {
        justify-content: center;  /* center the nav links too */
    }
}
.site-nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.site-nav a {
    text-decoration: none;
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    /* Oswald — condensed display sans in the same ballpark as the
       RVAdatebook wordmark. Falls back to the system stack if the font
       fails to load (e.g. ad blocker stripping fonts.googleapis.com). */
    font-family: 'Oswald', 'Trebuchet MS', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: 0.02em;
    transition: background .12s, color .12s;
}
.site-nav a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.site-nav a.active { background: var(--accent); color: #fff; }

/* System dropdown in main nav — must visually match .site-nav a exactly */
.nav-dropdown {
    position: relative;
    display: inline-flex;        /* same flex-item behavior as the anchors */
    align-items: center;
}
.nav-dropdown > summary {
    display: inline-flex;        /* not list-item (the browser default) */
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    /* Match the anchor styling above so "System" / "Profile" dropdowns
       feel identical to the other nav labels. */
    font-family: 'Oswald', 'Trebuchet MS', system-ui, sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: 0.02em;
    line-height: 1.5;            /* match anchors' line-height */
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .12s, color .12s;
}
.nav-dropdown > summary::-webkit-details-marker,
.nav-dropdown > summary::marker { display: none; content: none; }
.nav-dropdown > summary:hover { background: var(--accent-soft); color: var(--accent-dark); }
.nav-dropdown > summary.active { background: var(--accent); color: #fff; }
.nav-dropdown > summary:focus { outline: none; }
.nav-dropdown > summary:focus-visible {
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
}
/* Soften the caret so it doesn't dominate */
.nav-dropdown > summary .nav-caret {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
}
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(58,30,50,0.12);
    min-width: 180px;
    padding: 6px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-dropdown-menu a {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
    font-size: 13.5px;
    background: transparent;
}
.nav-dropdown-menu a:hover { background: var(--accent-soft); color: var(--accent-dark); }
.nav-dropdown-menu a.active { background: var(--accent); color: #fff; }

/* Profile icon + dropdown on the far right of the main nav */
.profile-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: currentColor;
}
.nav-profile {
    margin-left: 8px;
}
.nav-profile > summary {
    gap: 6px;
}
.nav-profile .profile-label {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
}
.nav-signin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    margin-left: 8px;
    transition: background .12s, color .12s;
}
.nav-signin:hover  { background: var(--accent-soft); color: var(--accent-dark); }
.nav-signin.active { background: var(--accent); color: #fff; }

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px;
}
h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -0.02em; }
h2 { margin: 24px 0 12px; font-size: 20px; }
h3 { margin: 0 0 8px; font-size: 16px; }
.subtitle { color: var(--muted); margin: 0 0 24px; }

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}
.card.link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .12s, box-shadow .12s;
}
.card.link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(58,30,50,0.10);
}
.card .stat {
    font-size: 32px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 6px;
}
.card .label { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.card p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }

/* DateFinder layout */
.finder-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 800px) {
    .finder-grid { grid-template-columns: 1fr; }

    .site-header {
        flex-wrap: wrap;        /* let the nav drop to its own line */
    }
    .site-nav {
        width: 100%;            /* span the full header width */
        margin-left: 0;         /* stop pushing to the right edge */
        flex-wrap: wrap;        /* wrap the nav items instead of overflowing */
    }
}

.filter-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.filter-panel h3 {
    margin: 0 0 6px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.filter-group { margin-bottom: 18px; }

/* (The .time-mode-pill weekday/weekend toggle was removed when the Time
   filter collapsed to four chips; each chip now matches both variants. */

.filter-group:last-child { margin-bottom: 0; }
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1ebe5;
    color: var(--ink);
    border: 1px solid transparent;
    font-size: 12.5px;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}
.chip:hover { background: var(--accent-soft); }
.chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.chip.tag-display {
    cursor: default;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 11.5px;
    padding: 2px 8px;
}

.search-row {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
    align-items: center;
}
.search-row input[type=text] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 15px;
    background: var(--panel);
    font-family: inherit;
    box-shadow: var(--shadow);
    transition: border-color .12s, box-shadow .12s;
}
.search-row input[type=text]::placeholder { color: var(--muted); }
.search-row input[type=text]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Filter panel header (replaces the old "Search" group with clear-all link) */
.filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.filter-panel-head h3 {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 600;
    flex: 1;                       /* push toggle + clear-all to the right */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* Badge that shows next to "Filters" when any chips are active.
   Visible all the time so you know filters are on, but most useful on
   mobile when the filter list is collapsed and you can't see chip state. */
.filter-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}
/* Toggle button: hidden on desktop entirely. The filter panel is always
   open on wide screens — there's plenty of room. On mobile it appears
   and controls the .collapsed state on the filter panel. */
.filter-toggle {
    display: none;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    background: var(--panel);
    border-radius: 999px;
    padding: 4px 10px;
    font: 600 11.5px/1 inherit;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink);
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
.filter-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
.filter-toggle-caret {
    display: inline-block;
    font-size: 10px;
    transition: transform .15s;
}
/* Caret flips when the panel is collapsed so it reads "▾" (open me). */
.filter-panel.collapsed .filter-toggle-caret { transform: rotate(180deg); }

/* Attention pulse: two slow halo flashes around the filter panel after
   page load. Mobile-only — it nudges users to tap into the collapsed
   filter bar instead of scrolling past it without realising it's there.
   Runs unconditionally on every visit; if it gets repetitive we can gate
   it on sessionStorage from JS.
   Animates ONLY box-shadow + outline so no layout shift occurs. */
@keyframes filter-aura-pulse {
    0%, 100% {
        box-shadow: var(--shadow);
        outline: 0 solid transparent;
    }
    50% {
        box-shadow: var(--shadow),
                    0 0 0 5px var(--accent-soft),
                    0 0 22px 4px var(--accent-soft);
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
}

@media (max-width: 800px) {
    /* Show the toggle and let it actually do something on small screens.
       Bump padding + font size up for a comfortable finger tap target —
       the desktop sizing is tuned for mouse clicks, too small on phones. */
    .filter-toggle {
        display: inline-flex;
        padding: 8px 16px;
        font-size: 13px;
        gap: 6px;
    }
    .filter-toggle-caret { font-size: 12px; }

    /* On mobile the filter panel pins itself just below the sticky site
       header so the user never loses access to it while scrolling through
       ideas. The --header-height var is published by a tiny script in
       includes/header.php that measures the rendered header (re-measures
       on resize) so the offset stays correct as the brand row wraps. */
    .filter-panel {
        position: sticky;
        top: var(--header-height, 100px);
        z-index: 15;            /* below the header (z:20), above the cards */
        /* Cap height to the viewport minus the header offset, and give
           the panel its OWN scroll. Without this, an expanded filter
           taller than the screen would overflow the viewport — touch
           scrolls inside the panel would bubble through to the page
           instead of moving the chips. `overscroll-behavior: contain`
           keeps a finger flick at the top/bottom of the filter from
           leaking into the underlying card scroll. */
        max-height: calc(100vh - var(--header-height, 100px));
        /* `scroll` (not `auto`) forces the scrollbar to always be visible —
           on iOS/Android the OS auto-hides scrollbars by default, leaving
           the user with no clue that the filter can scroll. We override
           both the WebKit and Firefox scrollbar styling below to make a
           clearly visible, finger-sized track. */
        overflow-y: scroll;
        overscroll-behavior: contain;
        margin-bottom: 10px;
        /* Firefox scrollbar styling */
        scrollbar-width: auto;
        scrollbar-color: var(--accent) var(--accent-soft);
        /* Solid bg so result cards behind the bar don't show through as it
           sticks at the top of the viewport. */
        /* Different bg from the page so the bar reads as a distinct
           floating surface as it pins over the scrolling content.
           --panel is the same white surface as cards; combined with
           the bold peach border and stacked shadows, the bar still
           reads as the foreground layer even when it overlaps a card. */
        background: var(--panel);
        border-bottom: 3px solid var(--accent-soft);
        box-shadow:
            0 2px 4px rgba(58, 30, 50, 0.22),     /* tight under-edge */
            0 10px 20px rgba(58, 30, 50, 0.20);   /* wide soft plume */
        /* Pulse: 1s per cycle × 2 cycles = ~2s of attention, with a brief
           start delay so the panel has rendered before the eye lands on it. */
        animation: filter-aura-pulse 1s ease-in-out 0.2s 2 both;
    }
    /* `prefers-reduced-motion` users get no animation at all. */
    @media (prefers-reduced-motion: reduce) {
        .filter-panel { animation: none; }
    }

    /* The collapsed state hides the actual filter chip groups and the
       clear-all link, leaving only the header bar with the toggle.
       Result: a small "Filters [N] ▾  Hide" pill that the user can tap
       to reopen, while results occupy the rest of the viewport. */
    .filter-panel.collapsed #filters { display: none; }
    .filter-panel.collapsed .clear-link { display: none; }
    .filter-panel.collapsed .filter-panel-head {
        margin-bottom: 0;
        /* Zero out the head's own padding when collapsed so the panel's
           own 12px top/bottom padding is the SOLE vertical breathing
           room around the text — keeps top and bottom symmetric. */
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }
    .filter-panel.collapsed { padding: 12px 16px; }

    /* Pin the filter-panel HEAD (the "Filters ▾ Hide  clear all" row) to
       the top of the scrolling filter container. As the user scrolls the
       chips, the head stays at the top so Hide / clear all are always
       one tap away. Zeroing the panel's top padding makes the head sit
       flush against the panel's top edge — no negative-margin tricks
       needed. The head's own padding gives the title some breathing room. */
    .filter-panel { padding-top: 0; padding-left: 0; padding-right: 0; }
    .filter-panel-head {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--panel);
        padding: 14px 18px 10px;
        margin-bottom: 14px;
        border-bottom: 1px solid var(--line);
    }
    /* Push the chip area back inside the side margins that we just zeroed
       on the panel — so the head is full-width but the chips read as
       padded content underneath it. */
    .filter-panel #filters,
    .filter-panel .clear-link { padding: 0 18px; }
    .filter-panel { padding-bottom: 18px; }

    /* WebKit (iOS Safari, Android Chrome) — beefy always-on scrollbar.
       14px wide is wide enough that the user clearly sees the track AND
       has a chance at dragging the thumb with their thumb. (Touch
       browsers don't allow scrollbar drag the way desktops do, but
       crucially the user can now SEE that scrolling is available, and
       roughly how much more content is below the fold.) */
    .filter-panel::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 14px;
    }
    .filter-panel::-webkit-scrollbar-track {
        background: var(--accent-soft);
        border-radius: 7px;
        margin: 4px 0;
    }
    .filter-panel::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 7px;
        /* Inset border narrows the thumb visually so the track shows
           through on either side — feels like a pill in a slot. */
        border: 3px solid var(--accent-soft);
    }
    .filter-panel.collapsed::-webkit-scrollbar { width: 0; }
}

/* Nearby popover — pops up under a clicked .nearby-btn */
.nearby-popover {
    position: absolute;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(58,30,50,0.18);
    padding: 12px;
    z-index: 1000;
    font-size: 13px;
}
.nearby-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.nearby-anchor {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 8px;
}
.nearby-anchor em { color: var(--accent-dark); font-style: normal; font-weight: 600; }
.nearby-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nearby-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ink);
    transition: background .12s;
}
.nearby-row:hover { background: var(--accent-soft); color: var(--accent-dark); }
.nearby-dist {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    color: var(--muted);
    min-width: 56px;
    flex-shrink: 0;
}
.nearby-row:hover .nearby-dist { color: var(--accent-dark); }
.nearby-title {
    flex: 1;
    line-height: 1.35;
}
.nearby-empty {
    color: var(--muted);
    font-size: 13px;
    font-style: italic;
    padding: 8px;
    text-align: center;
}
.result-count {
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

.clear-link {
    color: var(--accent);
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.clear-link:hover { text-decoration: underline; }
.filter-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

/* Idea cards */
.idea-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.idea-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Image hero on idea card: edge-to-edge banner above the card content.
   Negative margins absorb the card's padding so the image bleeds to the
   border. Fixed aspect via height + object-fit:cover gives a tidy strip
   even when source images vary wildly. */
.idea-card.has-image { padding-top: 0; }
.idea-card .idea-card-image {
    display: block;
    margin: 0 -18px 4px;
    /* Taller hero (was 160px) so cover-cropping eats less of the subject.
       More vertical room = less of the top/bottom of typical landscape
       photos gets clipped, while the image still fully fills the box. */
    height: 200px;
    overflow: hidden;
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
    background: #f3f3f6;
    /* Anchor for the absolutely-positioned .bg-blur layer on portrait cards. */
    position: relative;
}
.idea-card .idea-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.idea-card:hover .idea-card-image img { transform: scale(1.03); }

/* Two-layer rendering. By default the backdrop is hidden — single-img
   landscape cards behave exactly as before. Only when the JS detects a
   portrait image does the .portrait class get added and the layers
   become visible. */
.idea-card .idea-card-image .bg-blur { display: none; }

/* Portrait modifier: foreground image switches from cover (mid-crop) to
   contain (whole image visible, with letterbox bars). The .bg-blur
   sibling fills those bars with a heavily-blurred version of the same
   image — colours and feel of the photo, no sharp content — which looks
   far softer than the flat grey behind it. */
.idea-card .idea-card-image.portrait .bg-blur {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Heavy blur + slight saturation pop so the bars read as "of this
       image" rather than "an unrelated colour smear". scale(1.2) pushes
       the blur edges outside the visible box so we don't see the hard
       border where the blur fades to nothing. */
    filter: blur(22px) saturate(1.2);
    transform: scale(1.2);
    z-index: 0;
    /* Lock down: don't inherit the hover scale of normal images. */
    transition: none;
}
.idea-card .idea-card-image.portrait .fg {
    position: relative;
    object-fit: contain;
    z-index: 1;
}
/* Disable hover scale on portrait cards — both layers stay put. */
.idea-card:hover .idea-card-image.portrait .fg     { transform: none; }
.idea-card:hover .idea-card-image.portrait .bg-blur { transform: scale(1.2); }

/* ===== DateFinder card description: (more) truncation toggle ===== */
/* When a description runs longer than ~82 words on the finder, finder.js
   renders:
     <span class="desc-shown">…first 82 words…</span>
     <span class="desc-ellipsis">…</span>
     <span class="desc-rest" hidden>…remainder…</span>
     <button class="desc-more-btn" data-desc-toggle>(more)</button>
   The click handler toggles `hidden` on .desc-rest and .desc-ellipsis so
   the trailing ellipsis disappears when the tail is revealed. */
.desc-more-btn {
    appearance: none;
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    margin: 0;
    color: var(--accent-dark, var(--accent));
    font: inherit;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    vertical-align: baseline;
}
.desc-more-btn:hover { color: var(--accent); text-decoration: none; }
.desc-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ===== Comments (DateFinder cards + idea_edit + idea_view) ===== */
/* Comments toggle renders inline at the end of the description text, so it
   has to look like part of the sentence, not a chunky button below it.
   `.btn.comments-toggle` has higher specificity than `.btn` so these
   declarations win over the default button padding/font-size. */
.btn.comments-toggle {
    font-size: 11.5px;
    padding: 1px 8px;
    line-height: 1.4;
    vertical-align: baseline;
    margin-left: 4px;
    font-weight: 500;
}
.comments-section {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fafafa;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.comments-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.comments-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    background: #fff;
    resize: vertical;
    min-height: 38px;
}
.comments-status {
    font-size: 12px;
    color: var(--accent-dark);
    margin-bottom: 8px;
}
.comments-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comments-empty {
    font-size: 12.5px;
    color: var(--muted);
    font-style: italic;
}
.comment-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
}
.comment-byline {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.comment-byline strong { color: var(--ink); }
.comment-delete-btn {
    background: none;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.comment-delete-btn:hover:not(:disabled) { background: #ffeaea; color: #c22; }
.comment-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.comment-text {
    font-size: 13.5px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Inline link-styled button. Used where a <button> needs to look like a
   text link (e.g. "remove image" in an edit-form hint). */
.link-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}
.link-btn:hover { color: var(--accent-strong, var(--accent)); }
.idea-card h3 { margin: 0; font-size: 17px; }
.idea-card .desc {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
    /* Preserve literal newlines in the description text so editors
       can add paragraph breaks just by pressing Enter twice. Matches
       the white-space treatment already used on idea_view.php. */
    white-space: pre-wrap;
}
.idea-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.idea-card-head h3 { flex: 1; min-width: 0; word-wrap: break-word; }
.idea-card .edit-link {
    flex-shrink: 0;
    text-decoration: none;
    font-size: 11.5px;
    padding: 3px 8px;
    opacity: 0.75;
    transition: opacity .12s;
}
.idea-card:hover .edit-link,
.idea-card:hover .plan-btn { opacity: 1; }
.card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
/* When the card has an image, the action buttons float over the bottom-right
   corner of that image — that frees the title row to use the full card width
   without wrapping around a button column. The article is position:relative
   below; the actions absolute-position against it. */
.idea-card { position: relative; }
.idea-card.has-image .card-actions {
    position: absolute;
    /* Image is exactly 200px tall, starting after the card's 18px top padding.
       Pin the action group to the bottom-right of the image. */
    top: 212px;
    right: 12px;
    transform: translateY(-100%);
    z-index: 5;
    gap: 6px;
    /* No parent backdrop: each button carries its OWN drop-shadow so it
       reads against any image and the gap between buttons doesn't reveal
       a dark rectangle that doesn't follow the button shape. */
    background: transparent;
    padding: 0;
}
/* Each button stands alone with a soft drop-shadow for legibility on any
   image. Opaque-white surface keeps the icon/text clear. */
.idea-card.has-image .card-actions .btn {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ink);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    opacity: 1;
    font-size: 11.5px;
    /* Tightened horizontal padding so the Near/Save/Share trio reads as a
       compact pill row rather than wide buttons that crowd the image. */
    padding: 3px 7px;
}
.idea-card.has-image .card-actions .btn:hover {
    background: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
/* Mobile: pull the overlay slightly farther from the right edge AND make
   the buttons noticeably bigger so they're comfortable to tap with a
   thumb. ~44px tall total puts them well inside the Apple HIG / Material
   touch-target recommendations. */
@media (max-width: 800px) {
    .idea-card.has-image .card-actions {
        right: 8px;
        top: 208px;
        gap: 8px;
    }
    .idea-card.has-image .card-actions .btn {
        font-size: 13.5px;
        /* Mobile: still tap-friendly height (7px vertical) but tighter
           horizontal so three buttons + Edit fit on small screens. */
        padding: 7px 9px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}
.plan-btn {
    text-decoration: none;
    font-size: 11.5px;
    padding: 3px 7px;
    opacity: 0.75;
    transition: opacity .12s;
    cursor: pointer;
}

/* Planner popover */
.planner-popover {
    position: absolute;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(58,30,50,0.18);
    padding: 12px;
    z-index: 1000;
    font-size: 13px;
}
.planner-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.planner-close {
    /* Bigger and easier to tap on both desktop and mobile. The character
       itself is also bumped up — 18px → 28px reads as a real close button
       instead of a typographic detail. Square 32px hit area, rounded so it
       feels like a button when you hover. */
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.planner-close:hover {
    color: var(--danger);
    background: var(--accent-soft);
}
.planner-list {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 10px;
}
.planner-queue-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 6px;
    cursor: pointer;
}
.planner-queue-row:hover { background: var(--accent-soft); }
.planner-queue-row input[type=checkbox] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.planner-queue-name { flex: 1; }
.planner-queue-count {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--muted);
    background: #f1ebe5;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
}
.planner-new {
    display: flex;
    gap: 6px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
.planner-new-name {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
}
.planner-new-name:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}

/* Pick-a-list rows in the Save popover (replaces the old multi-toggle UI) */
.pick-list-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    text-align: left;
    transition: background .12s, color .12s;
}
.pick-list-row:hover { background: var(--accent-soft); color: var(--accent-dark); }
.pick-list-row:disabled { opacity: 0.6; cursor: not-allowed; }
.pick-list-name { flex: 1; font-weight: 500; }
.pick-list-meta {
    font-size: 11.5px;
    color: var(--muted);
    font-family: ui-monospace, Menlo, monospace;
}
.pick-list-meta em { color: var(--accent); font-style: italic; }

/* Toast notification (Saved to List, errors, info) — centered on screen */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: min(420px, calc(100vw - 40px));
    padding: 18px 28px;
    background: var(--ink);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.32);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    text-align: center;
    /* Compound transform: translate(-50%,-50%) for centering + translateY for
       the slide-up animation. Both fold into the same `transform` property. */
    transform: translate(-50%, calc(-50% + 12px));
    opacity: 0;
    transition: opacity .22s, transform .22s;
    z-index: 5000;
    pointer-events: none;
}
.toast-visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}
.toast-ok   { background: #1f6a3f; }
.toast-info { background: #4a4036; }
.toast-err  { background: #7a1a15; }

/* Auth modal — inline sign-in / sign-up overlay */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(42, 35, 48, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 6000;
    animation: auth-fade-in .15s ease-out;
}
@keyframes auth-fade-in { from { opacity: 0; } to { opacity: 1; } }
.auth-modal {
    position: relative;
    background: var(--panel);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.30);
    max-width: 420px;
    width: 100%;
    padding: 28px 28px 22px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.auth-modal h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.auth-modal .auth-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; }
.auth-modal .field { margin-bottom: 14px; }
.auth-modal .field label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--ink); }
.auth-modal .field input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.auth-modal .field input:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
.auth-modal .auth-error {
    padding: 10px 12px;
    background: #fde7e6;
    color: #7a1a15;
    border: 1px solid #f1bdba;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
}
.auth-modal .btn-row { margin: 6px 0 0; }
.auth-modal .auth-foot {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}
.auth-modal .auth-foot a { color: var(--accent); text-decoration: none; }
.auth-modal .auth-foot a:hover { text-decoration: underline; }
.auth-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background .12s, color .12s;
}
.auth-modal-close:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* "or" divider above the Google Sign-In button (used in both modal panes and on login.php) */
.oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 18px 0 14px;
}
.oauth-divider::before,
.oauth-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--line);
}
.g-signin { display: flex; justify-content: center; }

/* Local-auth disclosure ("Use a username & password ▾"). Used on login.php
   and inside the auth modal's login/signup panes. Most users sign in with
   Google/Apple — this section stays collapsed unless someone deliberately
   needs the local form. */
.auth-local-toggle {
    margin: 18px 0 0;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}
.auth-local-toggle > summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    list-style: none;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
.auth-local-toggle > summary::-webkit-details-marker { display: none; }
.auth-local-toggle > summary::before {
    content: '\25B8';                                /* right-pointing triangle */
    display: inline-block;
    font-size: 10px;
    transition: transform .15s;
}
.auth-local-toggle[open] > summary::before { transform: rotate(90deg); }
.auth-local-toggle > summary:hover { color: var(--accent); }

/* Sub-nav within the Date Ideas section */
.subnav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--line);
    margin: -8px 0 24px;
}
.subnav a {
    text-decoration: none;
    color: var(--muted);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .12s, border-color .12s;
}
.subnav a:hover { color: var(--ink); }
.subnav a.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Bundle section on idea_edit.php */
.bundle-section {
    background: #fbf7f3;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 18px;
}
.bundle-section h4 {
    margin: 0 0 8px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.bundle-membership-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13.5px;
}
.bundle-membership-row .bundle-name { flex: 1; font-weight: 500; }
.bundle-membership-row .bundle-meta { font-size: 11.5px; color: var(--muted); }
.bundle-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
}
.bundle-add-row select, .bundle-add-row input[type=text] {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    font-family: inherit;
}
.bundle-add-row select { min-width: 200px; }
.bundle-add-row input[type=text] { min-width: 200px; }

/* Bundle item rows on bundle_edit.php */
.bundle-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 8px;
    box-shadow: var(--shadow);
}
.bundle-item .pos {
    font-family: ui-monospace, Menlo, monospace;
    color: var(--accent);
    font-weight: 700;
    font-size: 18px;
    min-width: 28px;
    text-align: right;
    line-height: 1.5;
}
.bundle-item .body { flex: 1; min-width: 0; }
.bundle-item .body h4 {
    margin: 0 0 4px;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}
.bundle-item .body .desc { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.bundle-item .ops {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}
.bundle-item .ops .up-down {
    display: flex;
    gap: 2px;
}
.bundle-item .ops .arrow-btn {
    padding: 2px 8px;
    font-size: 12px;
    font-family: ui-monospace, Menlo, monospace;
    line-height: 1;
}

/* Processing-metadata disclosure on idea edit form */
.proc-meta {
    background: #fbf9f6;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
}
.proc-meta > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    list-style: none;
}
.proc-meta > summary::-webkit-details-marker { display: none; }
.proc-meta > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    transition: transform .12s;
}
.proc-meta[open] > summary::before { transform: rotate(90deg); }
.proc-meta > summary small {
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
}
.proc-icon {
    margin-right: 4px;
}
.badge-human-only {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* Version history */
.version-history {
    margin-top: 28px;
    border-top: 1px dashed var(--line);
    padding-top: 18px;
}
.version-history > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    color: var(--ink);
}
.version-history > summary::-webkit-details-marker { display: none; }
.version-history > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 6px;
    transition: transform .12s;
}
.version-history[open] > summary::before { transform: rotate(90deg); }
.version-history > summary small {
    color: var(--muted);
    font-weight: 400;
    margin-left: 6px;
}
.version-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.version-entry {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    overflow: hidden;
}
.version-entry > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    font-size: 13px;
}
.version-entry > summary::-webkit-details-marker { display: none; }
.version-entry > summary::before {
    content: '\25B8';
    display: inline-block;
    color: var(--muted);
    transition: transform .12s;
}
.version-entry[open] > summary::before { transform: rotate(90deg); }
.version-entry[open] > summary {
    background: #faf6f2;
    border-bottom: 1px solid var(--line);
}
.op-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.op-badge.op-create { background: #e6f4ec; color: #1f6a3f; }
.op-badge.op-update { background: #fff3d6; color: #7a531a; }
.op-badge.op-delete { background: #fde7e6; color: #7a1a15; }
.version-num {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    color: var(--muted);
    min-width: 32px;
}
.version-entry time {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    color: var(--ink);
}
.src-chip {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    background: #f1ebe5;
    color: var(--ink);
}
.src-chip.src-api { background: #dbe8fb; color: #1a4480; }

.version-content {
    padding: 14px 16px;
}
.snap-field {
    margin-bottom: 14px;
}
.snap-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.snap-row label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin: 0;
    font-weight: 600;
}
.snap-value {
    margin: 0;
    padding: 8px 10px;
    background: #fafafa;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13.5px;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
}
.snap-value.mono {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
}
.snap-empty {
    color: var(--muted);
    font-style: italic;
    font-size: 13px;
    padding: 4px 0;
}
.snap-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.snap-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.snap-tag-cat {
    min-width: 110px;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.snap-tag-row .copy-btn {
    margin-left: auto;
}
.snap-raw {
    margin-top: 12px;
    border-top: 1px dashed var(--line);
    padding-top: 10px;
}
.snap-raw > summary {
    cursor: pointer;
    list-style: none;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.snap-raw > summary::-webkit-details-marker { display: none; }
.snap-raw > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 4px;
    transition: transform .12s;
}
.snap-raw[open] > summary::before { transform: rotate(90deg); }

/* Copy button states */
.copy-btn {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    margin-left: auto;
}
.copy-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-soft); }
.copy-btn.copied {
    background: #e6f4ec;
    color: #1f6a3f;
    border-color: #b9dec9;
}

/* AppDevelopment items */
.appdev-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 16px 0 20px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.appdev-filters > strong {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}
.appdev-filters .chip {
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
}
.appdev-filters .chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.appdev-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    margin-bottom: 10px;
    transition: transform .1s, box-shadow .1s;
}
.appdev-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(58,30,50,0.10);
}
.appdev-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.appdev-card h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}
.appdev-card-meta {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--muted);
    font-family: ui-monospace, Menlo, monospace;
}
.appdev-notes-preview {
    color: var(--muted);
    font-size: 13px;
    margin: 6px 0 0;
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Category badges */
.cat-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cat-badge.cat-Enhancement { background: #dbe8fb; color: #1a4480; }
.cat-badge.cat-Issue       { background: #fde7e6; color: #7a1a15; }
.cat-badge.cat-Notes       { background: #f0ece6; color: #4a4036; }
.cat-badge.cat-Other       { background: #ece4f5; color: #4a2f6e; }

/* Status badges */
.status-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-badge.status-Open                 { background: #fff3d6; color: #7a531a; }
.status-badge.status-Cancelled            { background: #ece6e0; color: #6a5d52; }
.status-badge.status-Resolved\/Completed,
.status-badge.status-Resolved             { background: #e6f4ec; color: #1f6a3f; }
.status-badge.status-Other                { background: #f0ece6; color: #4a4036; }
.status-badge[class*="status-Resolved"]   { background: #e6f4ec; color: #1f6a3f; }
.status-badge[class*="status-Cancelled"]  { background: #ece6e0; color: #6a5d52; }
.status-badge[class*="status-Open"]       { background: #fff3d6; color: #7a531a; }

/* Featured bundles strip on DateFinder */
.bundles-strip-section {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px dashed var(--line);
}
.bundles-strip-head {
    margin: 0 0 12px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 600;
}
.bundles-strip-head small {
    font-size: 11.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.bundles-strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    scroll-snap-type: x proximity;
}
.bundles-strip::-webkit-scrollbar { height: 8px; }
.bundles-strip::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
}
.bundle-card {
    position: relative;
    flex: 0 0 300px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Layered "stacked cards" effect to suggest the bundle is composite. */
.bundle-card .bundle-card-stack,
.bundle-card .bundle-card-stack.second {
    position: absolute;
    inset: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    z-index: -1;
}
.bundle-card .bundle-card-stack {
    transform: translate(4px, 4px);
    opacity: 0.55;
}
.bundle-card .bundle-card-stack.second {
    transform: translate(8px, 8px);
    opacity: 0.3;
}
.bundle-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.bundle-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bundle-card h3 {
    margin: 0;
    font-size: 17px;
    word-wrap: break-word;
}
.bundle-card .desc {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0;
}
.bundle-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--ink);
}
.bundle-steps li {
    padding: 3px 0;
    border-bottom: 1px dotted var(--line);
}
.bundle-steps li:last-child { border-bottom: none; }
.bundle-steps .step-num {
    font-family: ui-monospace, Menlo, monospace;
    color: var(--accent);
    font-weight: 600;
    margin-right: 4px;
}
.bundle-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
}
.bundle-card:hover .edit-link,
.bundle-card:hover .plan-btn { opacity: 1; }
.idea-source {
    font-size: 12.5px;
    color: var(--muted);
    font-style: normal;
    padding-top: 6px;
}
.idea-source em { font-style: italic; }
.idea-extra {
    margin-top: 4px;
    border-top: 1px dashed var(--line);
    padding-top: 6px;
}
.idea-extra > summary {
    cursor: pointer;
    list-style: none;
    font-size: 11.5px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
}
.idea-extra > summary::-webkit-details-marker { display: none; }
.idea-extra > summary::before {
    content: '\25B8'; /* right-pointing small triangle */
    display: inline-block;
    margin-right: 4px;
    transition: transform .12s;
}
.idea-extra[open] > summary::before { transform: rotate(90deg); }
.idea-extra > summary:hover { color: var(--accent); }
.idea-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}
.idea-link {
    color: var(--accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.idea-link:hover { text-decoration: underline; }
.us-map-icon {
    width: 18px;
    height: 18px;       /* the PNG is square */
    flex-shrink: 0;
    vertical-align: middle;
    object-fit: contain;
}
/* Mobile: hide the chip strip at the bottom of each DateFinder card.
   On a narrow column the chips wrap into 3-5 rows of low-value visual
   noise that just pushes the next card further down. The filters above
   already convey the same information at the moment of search.
   Cards on idea_view.php / planner_queue.php still show them — this
   rule only fires for the DateFinder result list. */
@media (max-width: 800px) {
    #results .idea-card .tags { display: none; }
}
.idea-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    /* No margin-top:auto — keeps tags flush under the links/description.
       In a row of cards with mismatched content lengths the slack ends
       up at the bottom of the card (looks like a padded card), instead
       of a weird empty band between description and tags. */
}

.empty {
    text-align: center;
    color: var(--muted);
    padding: 60px 20px;
    background: var(--panel);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* Tables for admin */
table.data {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
table.data th, table.data td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.data th {
    background: #f7f1ec;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 600;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover { background: #fdf9f5; }
table.data .actions { white-space: nowrap; text-align: right; width: 1%; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
}
.btn:hover { background: var(--accent-dark); }
.btn.secondary { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { background: #f1ebe5; }
.btn.danger { background: var(--danger); }
.btn.danger:hover { background: #8a1d18; }
.btn.small { padding: 5px 10px; font-size: 12.5px; }
.btn-row { display: flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.btn-row .spacer { flex: 1; }

/* Forms */
form.stacked { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 6px; font-weight: 500; font-size: 14px; }
.field input[type=text], .field textarea, .field select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    font-family: inherit;
}
.field input[type=text]:focus, .field textarea:focus, .field select:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
.field textarea { min-height: 90px; resize: vertical; }
.field .hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

.tag-picker-group { margin-bottom: 14px; }
.tag-picker-group h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-picker label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f1ebe5;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .12s, color .12s;
}
.tag-picker label:has(input:checked) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.tag-picker input { display: none; }

/* Messages */
.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}
.flash.ok { background: #e6f4ec; color: #20633e; border: 1px solid #b9dec9; }
.flash.err { background: #fde7e6; color: #7a1a15; border: 1px solid #f1bdba; }

/* Footer */
.site-footer {
    text-align: center;
    color: var(--muted);
    padding: 32px;
    font-size: 12px;
}
.site-footer .footer-link {
    color: var(--accent);
    text-decoration: none;
}
.site-footer .footer-link:hover { text-decoration: underline; }

/* Page header row */
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head .spacer { flex: 1; }

form.inline { display: inline; }

/* Tags admin */
.cat-block { margin-bottom: 28px; }
.cat-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cat-block-head h2 { margin: 0; }
.cat-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-tag-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 13px;
    box-shadow: var(--shadow);
}
.cat-tag-row form { display: inline; }
.cat-tag-row .x {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 50%;
}
.cat-tag-row .x:hover { background: #f5dbe1; color: var(--danger); }

.add-tag-form {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 10px;
}
.add-tag-form input[type=text] {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 13px;
    width: 220px;
}


/* ---- idea_edit / speed_reviewer shared form widgets ---- */
.form-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}
.form-section-head {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-section-head .badge-human-only { font-size: 10px; }
.form-section > .field { margin-bottom: 14px; }
.form-section > .field:last-child { margin-bottom: 0; }

/* Side-by-side image preview (also used on speed_reviewer) */
.image-compare {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.image-compare figure { margin: 0; }
.image-compare figcaption {
    font-size: 11.5px;
    color: var(--muted);
    text-align: center;
    margin-top: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.image-compare-card .image-compare-frame {
    /* Matches the DateFinder card image box: 320x200 cover-cropped. */
    width: 320px;
    height: 200px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #f3f3f6;
}
.image-compare-card .image-compare-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-compare-large img {
    max-width: 640px;
    max-height: 480px;
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 4px;
}
@media (max-width: 720px) {
    .image-compare-large img { max-width: 100%; }
    .image-compare-card .image-compare-frame { width: 100%; max-width: 360px; }
}

/* Day-of-week chip picker */
.day-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.day-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}
.day-chip input[type="checkbox"] { margin: 0; cursor: pointer; }
.day-chip:hover { background: var(--accent-soft); }
.day-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Place-cardinality chip picker */
.cardinality-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cardinality-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    font-size: 12.5px; font-weight: 600;
    cursor: pointer; user-select: none;
    transition: background .12s, color .12s, border-color .12s;
}
.cardinality-chip input { margin: 0; cursor: pointer; }
.cardinality-chip:hover { background: var(--accent-soft); }
.cardinality-chip.active {
    background: var(--accent); color: #fff; border-color: var(--accent);
}

/* Hours-of-operation tracking block */
.oh-block {
    background: #fafafa;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    padding: 14px;
}
.oh-block .sublabel {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.oh-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    align-items: start;
}
@media (max-width: 720px) { .oh-grid { grid-template-columns: 1fr; } }
.oh-block input[type="datetime-local"],
.oh-block input[type="text"],
.oh-block textarea { width: 100%; }
.oh-block textarea {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12.5px;
}

/* Small "(open|view |)" pill next to URL labels */
.link-open {
    margin-left: 6px;
    font-size: 11.5px;
    padding: 1px 6px;
    border: 1px solid var(--accent-soft);
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    text-decoration: none;
    font-weight: 600;
    vertical-align: 1px;
}
.link-open:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Day-chip toggle script handler (registered once on DOMContentLoaded). */


/* ---- collapsible form-section overrides ---- */
/* When a form-section is a <details> instead of a <div>, give it the same
   card styling plus a proper disclosure caret on the summary. */
details.form-section { padding: 0; }
details.form-section > summary.form-section-head {
    cursor: pointer;
    margin: 0;
    padding: 14px 18px;
    border-bottom: 1px solid transparent;
    list-style: none;            /* hide default marker */
    user-select: none;
}
details.form-section > summary.form-section-head::-webkit-details-marker { display: none; }
details.form-section > summary.form-section-head::before {
    content: "B8";          /* right-pointing triangle */
    display: inline-block;
    margin-right: 8px;
    color: var(--accent);
    transition: transform .15s;
}
details.form-section[open] > summary.form-section-head::before {
    transform: rotate(90deg);
}
details.form-section[open] > summary.form-section-head {
    border-bottom-color: var(--line);
    margin-bottom: 14px;
}
details.form-section > *:not(summary) {
    padding: 0 18px 16px;
}

/* Light-red highlight for an empty Google Place ID (or any field flagged
   missing). Class toggled live by JS as the admin types. */
.pid-empty { background: #ffe4e1; border-color: #e8a8a3; }
.pid-empty:focus { background: #fff7f6; }


/* ---- quality-score inline label ---- */
/* Compact (Quality score: N) tag inline with the Description label.
   Red 0-4, yellow 5-7, green 8-21 - matches the speed-reviewer
   score-pill heat map. */
.quality-inline {
    font-size: 12.5px;
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: 0;
    text-transform: none;
}
.quality-inline.q-red    { color: #b00020; }
.quality-inline.q-yellow { color: #b8860b; }
.quality-inline.q-green  { color: #1f7a1f; }