/* The Forge palette. Graphite and hot iron, after Proverbs 27:17.
 *
 * --accent-rgb carries the accent as bare channels so tints can be written
 * rgba(var(--accent-rgb), 0.1) and follow the theme, instead of the hardcoded
 * purple rgba() values that used to be scattered through this file.
 *
 * --accent-contrast is the text colour that belongs ON the accent. Dark mode
 * puts near-black on bright ember (5.7:1) and light mode puts white on a
 * deeper ember (4.5:1). White on bright ember would be 3.0:1 and fails AA.
 */
:root {
    --bg-primary: #14161a;
    --bg-secondary: #1c1f24;
    --bg-tertiary: #24282f;
    --text-primary: #e8e6e3;
    --text-secondary: #a1a09c;
    --accent-primary: #e2703a;
    --accent-hover: #f08a55;
    --accent-secondary: #e8a33d;
    --accent-contrast: #14161a;
    --accent-rgb: 226, 112, 58;
    --border-color: #2e333b;
    --success: #22c55e;
    --error: #ef4444;
    --warning: #d9a521;
}

/* Light mode theme */
[data-theme="light"] {
    --bg-primary: #faf9f7;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0eeea;
    --text-primary: #1a1c20;
    --text-secondary: #5c5f66;
    --accent-primary: #c2551f;
    --accent-hover: #a04416;
    --accent-secondary: #a86a12;
    --accent-contrast: #ffffff;
    --accent-rgb: 194, 85, 31;
    --border-color: #ddd9d2;
    /* Darker than the dark-mode set: the originals were tuned for a dark
     * background and dropped to about 2.3:1 as text on white. */
    --success: #15803d;
    --error: #dc2626;
    --warning: #b45309;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth transitions for theme changes */
*,
*::before,
*::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    /* iOS Safari measures 100vh as the viewport with its chrome hidden, so the
     * page is taller than what is actually on screen and the last rows sit
     * behind the URL bar. dvh tracks the chrome as it collapses and expands.
     * The vh line above stays as the fallback for browsers without dvh, where
     * it is already correct. */
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(var(--accent-rgb), 0.2);
}

/* Ensure images scale properly on mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent text from overflowing on mobile */
p, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
}

.navbar {
    background-color: var(--bg-secondary);
    /* The top inset is what keeps this bar clear of the iPhone status bar.
     *
     * viewport-fit=cover plus apple-mobile-web-app-status-bar-style set to
     * black-translucent tells iOS to draw the page edge to edge, underneath
     * the clock, the battery and the Dynamic Island. Without a top inset the
     * brand and the whole icon row sit beneath that furniture, where taps land
     * on the system status bar instead of on the site. The bottom bar has
     * always accounted for the home indicator; the top never did.
     *
     * The side insets matter in landscape, where the notch eats into one edge.
     * All three resolve to 0 on hardware that has none, which is every Android
     * phone and every desktop. */
    padding: calc(1rem + env(safe-area-inset-top, 0px))
             calc(2rem + env(safe-area-inset-right, 0px))
             1rem
             calc(2rem + env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* A row now: shield, then the name block, which is itself the column that
   holds the wordmark above the verse. */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
}

.navbar-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.navbar-shield {
    color: var(--accent-primary);
    flex: none;
}

/* ------------------------------------------------------------- empty states
 *
 * The one place a large mark belongs inside the app. A watermark behind a
 * working screen fights the charts and tables it sits under, but an empty
 * state is dead space by definition, and filling it with the shield says
 * "nothing here yet" better than a sentence alone.
 */
.empty-state {
    position: relative;
    text-align: center;
    padding: 3rem 1.5rem;
    overflow: hidden;
}

.empty-state .logo-mark {
    display: block;
    margin: 0 auto 1rem;
    color: var(--accent-primary);
    /* Faint enough to read as texture rather than as a thing to look at. */
    opacity: 0.16;
}

.empty-state p {
    color: var(--text-secondary);
    margin: 0 auto;
    max-width: 44ch;
}

.empty-state .btn {
    margin-top: 1.25rem;
}

.navbar-brand:hover {
    color: var(--accent-primary);
}

.navbar-name {
    white-space: nowrap;
}

/* The numerals carry the ember, the word stays ink. Proverbs 27:17 is the
 * name, so the number is the part worth marking. */
.navbar-mark {
    color: var(--accent-primary);
}

.navbar-brand:hover .navbar-mark {
    color: var(--accent-hover);
}

.navbar-subtitle {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--text-secondary);
    margin-top: 0.1rem;
    letter-spacing: 0.5px;
}

.navbar-verse-ref {
    display: block;
    margin-top: 0.15rem;
}

.navbar-nav {
    display: flex;
    gap: 1rem;
    list-style: none;
    align-items: center;
}

/* ---------------------------------------------------- grouped navigation
 *
 * Four menus rendered from core/navigation.py. The markup is a button plus a
 * plain list, and the list is hidden with the `hidden` attribute rather than
 * display:none in CSS, so the menus still open on hover and keyboard focus if
 * the script never runs.
 */
.nav-groups {
    display: flex;
    gap: 0.15rem;
    flex: 1;
    margin-left: 2rem;
}

.nav-group {
    position: relative;
}

.nav-group-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.nav-group-btn .icon {
    opacity: 0.55;
}

.nav-group-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* The section you are in, not the menu that happens to be open. */
.nav-group-btn.current {
    color: var(--accent-primary);
    font-weight: 600;
}

.nav-group-btn[aria-expanded="true"] {
    color: var(--accent-primary);
    background-color: rgba(var(--accent-rgb), 0.1);
}

.nav-menu {
    position: absolute;
    top: calc(100% + 0.3rem);
    left: 0;
    z-index: 300;
    min-width: 13rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.nav-menu a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 0.92rem;
    /* Comfortably tappable where this is reachable by touch. */
    min-height: 40px;
}

.nav-menu a .icon {
    color: var(--accent-primary);
    flex: none;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
    background-color: var(--bg-tertiary);
}

/* No-JS and pre-JS fallback: hover or tab into the group to open it. Dropped
 * once the script announces itself, so a click-opened menu is not also
 * fighting hover. */
body:not(.nav-js) .nav-group:hover .nav-menu,
body:not(.nav-js) .nav-group:focus-within .nav-menu {
    display: block;
}

body:not(.nav-js) .nav-group:hover .nav-menu[hidden],
body:not(.nav-js) .nav-group:focus-within .nav-menu[hidden] {
    display: block;
}

.nav-link {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--text-primary);
}

/* Theme toggle button */
.theme-toggle-btn {
    background: none;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    padding: 0;
    color: var(--text-primary);
}

.theme-toggle-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--accent-primary);
    transform: rotate(20deg);
}

.theme-icon-dark,
.theme-icon-light {
    line-height: 1;
}

.theme-icon-light {
    display: none;
}

/* Inline SVG icons, from templates/includes/icon.html. They stroke with
 * currentColor, so they take the colour of whatever they sit in. */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.btn {
    padding: 0.5rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: var(--accent-contrast);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--bg-secondary);
}

.btn-logout {
    background-color: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}

.btn-logout:hover {
    background-color: var(--error);
    color: white;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-radius: 10px;
    margin: 2rem 0;
}

.hero-shield {
    display: block;
    margin: 0 auto 1.5rem;
    color: var(--accent-primary);
}

@media (max-width: 600px) {
    /* Smaller, so the headline and the buttons still land in the first screen
       rather than being pushed below the fold by the logo. */
    .hero-shield { height: 64px; }
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.card-header {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}

.form-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: block;
}

.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid var(--success);
    color: var(--success);
}

.alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    color: var(--error);
}

.alert-info {
    background-color: rgba(var(--accent-rgb), 0.12);
    border: 1px solid var(--accent-primary);
    color: var(--accent-primary);
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
    color: var(--error);
}

.errorlist li {
    padding: 0.25rem 0;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.dashboard-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.dashboard-card h3 {
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.dashboard-card p {
    color: var(--text-secondary);
}

footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 2rem;
    text-align: center;
    margin-top: 4rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    /* Reduce padding for mobile */
    .container {
        padding: 1rem;
    }

    /* Navbar adjustments. The insets are repeated rather than inherited,
       because this rule replaces the shorthand above outright and dropping
       them here would put the bar back under the status bar on exactly the
       devices that have one. */
    .navbar {
        padding: calc(1rem + env(safe-area-inset-top, 0px))
                 calc(1rem + env(safe-area-inset-right, 0px))
                 1rem
                 calc(1rem + env(safe-area-inset-left, 0px));
    }

    /* One row, not a stacked block. The header used to wrap onto two or three
       lines and push the page content below the fold before anything had been
       read. */
    .navbar-container {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .navbar-brand {
        align-items: flex-start;
        font-size: 1.15rem;
    }

    .navbar-subtitle {
        font-size: 0.6rem;
    }

    .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.15rem;
        justify-content: flex-end;
        width: auto;
        margin-left: auto;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    /* Hero section */
    .hero {
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 0.95rem;
    }

    /* Cards and grids */
    .card {
        padding: 1.5rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Buttons - make them more touch-friendly */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        min-height: 44px; /* iOS recommended touch target size */
    }

    /* Form controls - bigger for mobile */
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.85rem;
    }

    /* Tables - make scrollable */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Footer */
    footer {
        padding: 1.5rem 1rem;
        font-size: 0.9rem;
    }

    /* Profile pictures - slightly smaller on mobile */
    .profile-pic {
        width: 40px;
        height: 40px;
    }

    .profile-pic-placeholder {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    .navbar-subtitle {
        font-size: 0.55rem;
        line-height: 1.3;
    }

    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }

    .card {
        padding: 1rem;
    }

    .navbar-nav {
        font-size: 0.85rem;
    }
}

/* Notification Badge */
.notification-bell {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--error);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    z-index: 10;
}

/* Navbar Search */
.navbar-search {
    position: relative;
}

.search-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-input {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 160px;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
    width: 220px;
}

.search-input::placeholder {
    color: var(--text-secondary);
}

.search-button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color 0.3s ease;
}

.search-button:hover {
    color: var(--accent-primary);
}

@media (max-width: 1024px) {
    .search-input {
        width: 130px;
    }

    .search-input:focus {
        width: 180px;
    }
}

@media (max-width: 768px) {
    .navbar-search {
        width: 100%;
        order: -1;
    }

    .search-form {
        width: 100%;
    }

    .search-input {
        width: 100%;
        flex: 1;
    }

    .search-input:focus {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Mobile bottom navigation
   ---------------------------------------------------------------------------
   Below 768px the top navbar previously stacked into a tall block: a centred
   brand, a wrapped row of seven links and a full-width search, eating most of
   the first screen on every page. The primary destinations move down here
   instead, within thumb reach, and the top navbar drops them.

   Desktop never sees this bar.
*/
.bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        /* Clears the Android gesture handle and the iOS home indicator.
           Resolves to 0 on devices without one, and needs viewport-fit=cover
           on the viewport meta to resolve at all. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Landscape on a notched iPhone pushes one edge inward. Without these
           the outermost tab sits under the notch and cannot be tapped. */
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    .bottom-nav-link {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        /* 56px plus label keeps every target comfortably over the 44px
           minimum recommended for touch. */
        min-height: 56px;
        padding: 0.4rem 0.25rem;
        color: var(--text-secondary);
        font-size: 0.7rem;
        text-decoration: none;
        position: relative;
    }

    .bottom-nav-link.active {
        color: var(--accent-primary);
    }

    .bottom-nav-badge {
        position: absolute;
        top: 0.25rem;
        left: 50%;
        margin-left: 0.35rem;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background-color: var(--error);
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* Stop the fixed bar covering the end of the page. */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* The four section menus are the bottom bar on a phone, so the header
       does not repeat them. Messages and alerts deliberately stay up here:
       they used to occupy two of the five thumb positions, which is what
       pushed the trackers out of reach. */
    .nav-groups {
        display: none;
    }

    /* Anything tappable clears the 44px minimum. */
    .btn,
    .nav-link,
    .btn-icon {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Wide content scrolls inside its own box rather than forcing the whole
       page sideways. */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Starting a routine takes a date, so a session can be logged after the fact
   rather than only "now". */
.start-routine-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.start-routine-form label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.start-routine-form input[type="date"] {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    padding: 0.5rem;
    min-height: 44px;
    font-size: 1rem;
    /* Keeps the native picker's icon visible on a dark surface. */
    color-scheme: light dark;
}

/* A day deliberately taken off, shown as a statement rather than an absence. */
.rest-day-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: rgba(var(--accent-rgb), 0.12);
    border-left: 4px solid var(--accent-primary);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.rest-day-banner strong {
    display: block;
    color: var(--accent-primary);
}

.rest-day-banner span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Resolved weight for a picked measure, so "100 x 1 medium" is visibly 11 kg
   before it is saved rather than after. */
.amount-preview {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.amount-preview.implausible {
    color: var(--warning);
    font-weight: 600;
}

/* The product a barcode just resolved to, pinned above the search results. */
.scanned-card {
    border-left: 4px solid var(--accent-primary);
}

.scanned-label {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-primary);
    font-weight: 600;
}

/* A food whose numbers cannot be right, flagged where it is chosen rather
   than after it has already been logged. */
.food-warning {
    font-size: 0.8rem;
    margin: 0.25rem 0;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    border-left: 3px solid var(--warning);
    background-color: rgba(var(--accent-rgb), 0.08);
    color: var(--text-secondary);
}

.food-warning.impossible {
    border-left-color: var(--error);
    color: var(--error);
    font-weight: 600;
}

/* @username in a comment, linking to that person's profile. */
.mention {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
}

.mention:hover {
    text-decoration: underline;
}

/* @mention autocomplete, anchored under the textarea it serves. */
.mention-suggest {
    position: absolute;
    z-index: 200;
    margin: 0.15rem 0 0;
    padding: 0.25rem;
    list-style: none;
    min-width: 220px;
    max-width: 340px;
    max-height: 260px;
    overflow-y: auto;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.mention-suggest-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    /* Comfortably tappable on a phone. */
    min-height: 44px;
}

.mention-suggest-item.active,
.mention-suggest-item:hover {
    background-color: var(--bg-tertiary);
}

.mention-handle {
    color: var(--accent-primary);
    font-weight: 600;
}

.mention-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mention-friend {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}


/* Footer links. Quiet, but present on every page: an outside service that asks
   for a terms URL will also look for it in the obvious place. */
.footer-links {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--text-secondary);
}

.footer-links a:hover {
    color: var(--accent-primary);
}