/* =========================================================================
   PaceArena — Floating Info Bar (pa-bar)
   Overlay that sits inside #map at the top. Two-tier on mobile,
   single-row on tablet+. Ported from design handoff info-bar.css.
   ========================================================================= */

/* Wrapper that positions the info bar + optional banners over the map.

   Mobile (≤768px) — pa-bar is its own row, full width:
     left: 8px; right: 8px (children stretch to fill width).

   Desktop (≥769px) — pa-bar is centered, content-width, sharing the
   floating top row with the burger menu (left) and a single-column
   tools stack (search above, zoom below) on the right. Reserve 70px
   on each side (10 + 52 + 8) so the available band is symmetric and
   the bar centers naturally. */
.map-overlay-top {
    position: absolute;
    top: 10px;
    left: 8px;
    right: 8px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    pointer-events: none;
}
.map-overlay-top > * {
    pointer-events: none;
}

@media (min-width: 769px) {
    .map-overlay-top {
        top: 10px;
        left: 70px;   /* burger 10 + 52 + 8 gap = 70 */
        right: 70px;  /* tools column 10 + 52 + 8 gap = 70 (mirrors left) */
        align-items: center;
    }
}

/* Interactive elements within the overlay capture clicks */
.pa-stat,
.pa-id-avatar-link,
.pa-id-user-link,
.pa-id-team-link,
.map-pinned-banner-cta {
    pointer-events: auto;
}

/* Root bar container — frosted glass card */
.pa-bar {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 6px 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Identity strip — avatar + username + separator + "TEAM <name>".
   Every child uses line-height: 1 and align-items: center so cap heights
   align cleanly across the avatar's circle, the 14px username, and the
   smaller "team" label / 14px team name. */
.pa-id {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 4px 0 2px;
    min-height: 24px;
    line-height: 1.2;
}

.pa-id-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #000;
    color: #fff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease;
}
.pa-id-avatar:hover { background: #444; }

/* Username — clickable link styled to match the bar text */
.pa-id-user {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #0a0a0a;
    line-height: 1.22;
    flex-shrink: 1;
    min-width: 0;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease;
}
.pa-id-user:hover { color: #444; }

.pa-id-sep {
    width: 1px;
    height: 12px;
    background: rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    align-self: center;
}

.pa-id-team {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    color: #4a4a4a;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    line-height: 1.22;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: color 120ms ease;
}
.pa-id-team:hover .name { color: #444; }

.pa-id-team .label {
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 10px;
    font-weight: 600;
    color: #888;
    line-height: 1;
    flex-shrink: 0;
}

.pa-id-team .name {
    overflow: hidden;
    text-overflow: ellipsis;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.22;
    letter-spacing: 0;
    transition: color 120ms ease;
}

.pa-id-team .rank {
    flex: 0 0 auto;
    color: #9298a1;
    font: 600 11.5px/1.2 'Roboto', sans-serif;
    letter-spacing: 0.01em;
}

/* Flat stat row: the surrounding bar is already the surface, so the metrics
   stay pure white and use typography + dividers instead of a nested grey card. */
.pa-stats {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
}

.pa-bar.counter-pulse-active,
.pa-bar.counter-pulse-active .pa-stats,
.pa-bar.counter-pulse-active .pa-stat,
.pa-bar.counter-pulse-active .pa-stat .value {
    overflow: visible !important;
}

.pa-bar.counter-pulse-active .pa-stat:is(.counter-tile-pulse-red, .counter-tile-pulse-green) {
    z-index: 4;
}

.pa-stat {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 8px;
    padding: 5px 7px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    box-shadow: none;
    transition: color 140ms ease, transform 120ms ease;
    position: relative;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.pa-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 0;
    bottom: 7px;
    width: 1px;
    background: rgba(10, 10, 10, 0.14);
}

@media (hover: hover) and (pointer: fine) {
    .pa-stat:hover {
        background: #fff;
        box-shadow: none;
        transform: translateY(-1px);
    }
}

.pa-stat:active { transform: scale(0.96); }

.pa-stat:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 2px;
}

.pa-stat .label {
    font-family: 'Roboto', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: #71736f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    height: 1.35em;
    line-height: 1.35;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0;
    position: relative;
}

.pa-stat .value {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.015em;
    line-height: 1.15;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PAP Budget tile uses the same neutral grey label + black value as the
   other tiles — no green color. (.spend used to be green; class is kept
   for backwards compatibility but adds no overrides today.) */

/* Active contests use the landing page's black-card language with the
   red accent retained as the urgency signal. */
.pa-stat.contests-active {
    background: #111;
    box-shadow: 0 3px 10px rgba(10, 10, 10, 0.16);
}

@media (hover: hover) and (pointer: fine) {
    .pa-stat.contests-active:hover {
        background: #181818;
    }
}

.pa-stat.contests-active .label {
    color: rgba(255, 255, 255, 0.85);
    overflow: visible;
}
.pa-stat.contests-active .value { color: #fff; }

.pa-stat .pa-pulse {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    display: block;
    margin-left: 0;
    translate: 0 -50%;
    animation: pa-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pa-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

/* Zero contests — render as a regular tile (same look as Sectors /
   Team Value). No dimming or alternate value color; the .zero class is
   kept on the element so JS state can still toggle it. */

/* Single-row variant for tablet+ (added by JS matchMedia).
   Height is locked to 52px (border-box) so the bar visually aligns with
   the burger menu (52×52) on the left and the search/zoom buttons (52×52)
   on the right — they all sit on a single floating row. align-items:
   center handles the inner centering of the 35px-tall stat tiles so no
   explicit padding-y is needed. */
.pa-bar.row {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 0 16px;
    height: 52px;
    box-sizing: border-box;
}
.pa-bar.row .pa-id {
    flex: 0 1 auto;
    height: auto;
    padding: 0;
    gap: 10px;
}
.pa-bar.row .pa-id-user {
    max-width: 140px;
    font-size: 15px;
}
.pa-bar.row .pa-id-team {
    max-width: 180px;
}
.pa-bar.row .pa-id-team .name { font-size: 14px; }
.pa-bar.row .pa-stats {
    flex: 0 0 auto;
    margin-left: auto;
    height: 44px;
    align-items: center;
    box-sizing: border-box;
}
.pa-bar.row .pa-stat {
    flex: 0 0 auto;
    min-width: 92px;
    max-width: 108px;
    padding: 3px 14px;
    height: 36px;
    min-height: 0;
    max-height: 36px;
    overflow: hidden;
    box-sizing: border-box;
}
.pa-bar.row .pa-stat .label {
    min-height: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    line-height: 1.35;
}
/* Narrow desktop/tablet has the desktop side controls but not much center
   runway. Keep row mode, but make every piece shrink predictably so it does
   not drift into the burger/search buttons when translations or team names
   are longer than expected. */
@media (min-width: 769px) and (max-width: 900px) {
    .pa-bar.row {
        width: calc(100vw - 180px);
        max-width: 640px;
        gap: 10px;
        padding: 0 12px;
    }

    .pa-bar.row .pa-id {
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
    }

    .pa-bar.row .pa-id-user {
        max-width: 110px;
    }

    .pa-bar.row .pa-id-team {
        flex: 1 1 0;
        max-width: none;
    }

    .pa-bar.row .pa-stat {
        min-width: 76px;
        width: 76px;
        height: 34px;
        max-height: 34px;
        padding: 3px 5px;
    }

    .pa-bar.row .pa-stat .label { font-size: 9px; }
    .pa-bar.row .pa-stat .value { font-size: 13px; }
}

/* =========================================================================
   Bottom Sheet
   Peeks ~90px from the bottom of the map container. Expands to 50vh on
   tap/drag. Positioned absolutely within .container (position: relative).
   ========================================================================= */

/* Custom property for responsive peek height.
   --sheet-height uses dvh so the expanded sheet shrinks/grows with mobile
   browser chrome (Android URL bar + toolbar) instead of being clipped.
   Default 50dvh works for most phones (iPhone 12 Pro and up). Short
   screens get a height-adaptive bump in utilities.css so a Contest card
   action row still fits without extra scroll. */
:root {
    --sheet-peek: 64px;
    --sheet-height: 50vh;        /* fallback for browsers w/o dvh */
    --sheet-height: 50dvh;
}

.bottom-sheet {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Leaflet's labels pane sits at 650 so street/sector labels remain legible
       over polygons. The sheet is a sibling overlay and must sit above every
       map pane or labels can paint through its surface. */
    z-index: 700;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    height: min(
        var(--sheet-height),
        var(--sheet-expanded-max-height, calc(100dvh - 220px))
    );
    /* In peeked mode the tab dock is the visible top slice of this translated
       sheet. Include the device's bottom safe area in that slice so the tabs
       stay above an iOS home indicator while the sheet background still
       reaches the viewport edge. */
    transform: translateY(calc(
        100% - var(--sheet-peek) - env(safe-area-inset-bottom, 0px)
    ));
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.34s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.22s ease;
    will-change: transform;
    /* Body owns vertical scroll; handle/tabs override to touch-action: none
       so their custom drag gestures own the Y axis. */
    touch-action: pan-y;
    user-select: none;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Goals and narrow-screen Contests are compact card carousels rather than
   scrolling feeds. Let those views hug their measured content while the
   normal obstacle cap protects controls on short screens. Wide Contests use
   the regular sheet height and scroll only their stacked card list. */
.bottom-sheet[data-content-fit="true"] {
    height: min(
        var(--sheet-content-fit-height, var(--sheet-height)),
        var(--sheet-expanded-max-height, calc(100dvh - 220px))
    );
}

/* Compact card panels use the measured --sheet-content-fit-height above.
   Keeping the resting height numeric lets the browser interpolate smoothly
   when moving between a card panel and the fixed-height activity feed. */
.bottom-sheet:has(#tabGoals.panel-tab--active) .bottom-sheet__body,
.bottom-sheet:has(#tabGoals.panel-tab--active) #mapGoalsPanel {
    flex: 0 1 auto;
}
@media (max-width: 767px) {
    .bottom-sheet:has(#tabContests.panel-tab--active) .bottom-sheet__body,
    .bottom-sheet:has(#tabContests.panel-tab--active) #panelContests {
        flex: 0 1 auto;
    }
}

.bottom-sheet[data-state="expanded"] {
    transform: translateY(0);
}

/* The collapsed state is a deliberate navigation dock, not a cropped view of
   the expanded sheet. Keep the content completely out of sight so segmented
   controls and cards never peek below the three primary tabs. */
.bottom-sheet[data-state="peeked"] {
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.12);
}

.bottom-sheet[data-state="peeked"] .bottom-sheet__body,
.bottom-sheet[data-state="peeked"] .bottom-sheet__footer {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.bottom-sheet[data-state="hidden"] {
    transform: translateY(calc(100% + 8px));
    pointer-events: none;
}

/* Drag handle area */
.bottom-sheet__handle-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 12px;
    padding: 0;
    cursor: grab;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

.bottom-sheet__handle-bar:active {
    cursor: grabbing;
}

.bottom-sheet__handle {
    display: none;
}

/* Tab row */
.bottom-sheet__tabs {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    min-height: 64px;
    gap: clamp(8px, 2.2vw, 14px);
    padding: 10px clamp(24px, 10vw, 72px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    background: #fff;
    border-radius: 20px 20px 0 0;
    touch-action: none;
}

.bottom-sheet[data-state="peeked"] .bottom-sheet__tabs {
    border-bottom-color: transparent;
    min-height: calc(var(--sheet-peek) + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.bottom-sheet__tabs .panel-tab {
    flex: 0 1 clamp(80px, 24vw, 116px);
    min-width: 0;
    max-width: 116px;
    min-height: 42px;
    padding: 8px clamp(6px, 1.4vw, 10px);
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #8b929d;
    transition: color 0.2s ease,
                background-color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.24s ease,
                transform 0.2s ease;
}

.bottom-sheet__tabs #tabGoals { padding-inline: clamp(6px, 1.4vw, 10px); }

.bottom-sheet__tabs .panel-tab.panel-tab--active {
    border-color: transparent;
    background: transparent;
    color: #111827;
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .bottom-sheet__tabs .panel-tab:not(.panel-tab--active):hover {
        border-color: transparent;
        background: rgba(15, 23, 42, 0.035);
        color: #344054;
        transform: none;
    }
}

@media (max-width: 420px) {
    .bottom-sheet__tabs .panel-tab {
        min-height: 40px;
        font-size: clamp(13px, 3.7vw, 14px);
    }
}

/* Scrollable content area — not a scroll container itself;
   inner panel-content / logger-content handle scrolling */
.bottom-sheet__body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    touch-action: pan-y;
    overscroll-behavior: contain;
    transition: opacity 0.16s ease;
}

/* Footer inside the bottom sheet */
.bottom-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    box-sizing: border-box;
    flex-shrink: 0;
    text-align: center;
    padding: 11px 0;
    font-size: 11px;
    color: #aaa;
    font-family: 'Roboto', sans-serif;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.bottom-sheet__footer a {
    color: #888;
    text-decoration: none;
    margin: 0;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.bottom-sheet__footer a:hover {
    color: #333;
}

.bottom-sheet__footer span {
    color: #ddd;
    line-height: 1;
}

/* =========================================================================
   Panel tabs (shared by both old and new layout)
   ========================================================================= */

.panel-tab {
    background: none;
    border: none;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 20px 10px;
    position: relative;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    overflow: visible;
}

.panel-tab-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1em;
    overflow: visible;
    line-height: 1;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .panel-tab:hover {
        color: #6b7280;
    }
}

.panel-tab--active {
    color: #1a1a1a;
    font-weight: 600;
}

@media (hover: none), (pointer: coarse) {
    .panel-tab:hover {
        color: #9ca3af;
    }

    .panel-tab.panel-tab--active,
    .panel-tab.panel-tab--active:hover {
        color: #1a1a1a;
    }
}

/* A narrow desktop/in-app preview can still advertise a fine pointer.
   Match the mobile visual contract by suppressing hover residue by width too. */
@media (max-width: 768px) {
    .pa-stat:hover {
        background: #fff;
        box-shadow: none;
        transform: none;
    }

    .pa-stat.contests-active:hover {
        background: #111;
        box-shadow: 0 3px 10px rgba(10, 10, 10, 0.16);
    }

    .panel-tab:hover {
        color: #9ca3af;
    }

    .panel-tab.panel-tab--active,
    .panel-tab.panel-tab--active:hover {
        color: #1a1a1a;
    }
}

.panel-tab--active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    width: clamp(36px, 58%, 68px);
    transform: translateX(-50%);
    height: 2px;
    background: #000;
    border-radius: 1px;
}

.tab-badge {
    position: absolute;
    left: calc(100% + 5px);
    top: calc(50% + 1px);
    display: block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    background: #e34234;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    pointer-events: none;
    flex: 0 0 auto;
    translate: 0 -50%;
    box-shadow: 0 0 0 2px rgba(227, 66, 52, 0.12);
}

/* Panel Content */
.panel-content {
    flex: 1;
    overflow-y: auto;
    display: none;
    flex-direction: column;
    min-height: 0;
    padding: 8px 16px 0;
}

.panel-content--active {
    display: flex;
}

/* =========================================================================
   Team Logs feed
   ========================================================================= */

.logger-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    min-height: 0;
    padding-left: 10px;
    padding-right: 8px;
}

/* Infinite-scroll loading indicator (pulsing dots) */
.log-loading-indicator {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    pointer-events: none;
}

.log-loading-indicator.visible {
    display: flex;
}

.log-loading-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ca3af;
    animation: log-loading-dot 1.2s infinite ease-in-out;
}

.log-loading-indicator span:nth-child(2) { animation-delay: 0.2s; }
.log-loading-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes log-loading-dot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* End-of-feed indicator */
.log-end-indicator {
    display: none;
    text-align: center;
    padding: 8px 0 4px;
    color: #9ca3af;
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    font-style: italic;
}

.log-end-indicator.visible {
    display: block;
}

.logger-placeholder {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

.log-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    min-width: 0;
    border-radius: 8px;
    transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-entry.is-new {
    background: linear-gradient(90deg, rgba(8,145,178,0.13), rgba(255,255,255,0.98) 58%);
    border-left: 3px solid #0891b2;
    box-shadow: 0 3px 10px rgba(8,145,178,0.11), 0 0 0 1px rgba(8,145,178,0.08);
    padding-left: 9px;
    padding-right: 8px;
    margin: 5px 0 14px;
}

.pa-review-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 4px;
    color: #64748b;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.pa-review-divider::before,
.pa-review-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(100, 116, 139, 0.22);
}

.pa-review-divider--new {
    color: #0e7490;
}

.pa-review-divider--new::before,
.pa-review-divider--new::after {
    background: rgba(8, 145, 178, 0.3);
}

.pa-new-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #0891b2;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    text-transform: uppercase;
    vertical-align: middle;
}

.log-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    background: #4b5563;
}

.log-dot.claim      { background: #00e676; } /* captured sector: vivid owned green */
.log-dot.reinforce  { background: #00b84a; } /* defense / reinforce: brighter deep green */
.log-dot.points     { background: #00b8e6; } /* run-earned PAP: vivid cyan, away from sector blue */
.log-dot.join       { background: #00d1c1; } /* member joined: bright social teal */
.log-dot.leave      { background: #94a3b8; } /* member left: brighter slate */
.log-dot.release    { background: #c2410c; } /* abandoned sector: brighter release brown */
.log-dot.conflict   { background: #ff2d2d; } /* attack / active contest: vivid contest red */
.log-dot.win        { background: #84cc16; } /* contest won: brighter victory lime */
.log-dot.loss       { background: #f43f5e; } /* contest lost/forfeit: vivid rose */
.log-dot.info       { background: #6b7280; } /* system/info: brighter neutral charcoal */
.log-dot.goal-assigned  { background: #8b5cf6; }
.log-dot.goal-progress  { background: #0ea5e9; }
.log-dot.goal-completed { background: #22c55e; }
.log-dot.goal-cancelled { background: #f59e0b; }
.log-dot.goal-expired   { background: #ef4444; }

.log-dot.success { background: #00e676; }
.log-dot.danger  { background: #ff2d2d; }
.log-dot.warning { background: #00b84a; }
.log-dot.purple  { background: #a855f7; }

.log-content {
    flex: 1;
    min-width: 0;
    max-width: 100%;
}

.log-timestamp {
    color: #666;
    font-size: 12px;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

.log-timestamp a {
    font-size: 12px;
    margin-left: 8px;
}

.log-message {
    color: #333;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.log-message strong {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.log-sector-link {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
}

.log-sector-link:hover { text-decoration: underline; }

/* Make identity navigation visible without delaying the destination page. */
.pa-id-user-link, .pa-id-team-link, .pa-id-avatar-link {
    border-radius: 5px;
    transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.pa-id-user-link:active, .pa-id-team-link:active, .pa-id-avatar-link:active,
.pa-id-user-link.is-navigating, .pa-id-team-link.is-navigating, .pa-id-avatar-link.is-navigating {
    background: #dcfce7;
    box-shadow: 0 0 0 5px #dcfce7;
    transform: translateY(1px);
}
.pa-id-avatar-link.is-navigating { background: #166534; }
.pa-identity-navigation-progress {
    position: fixed; z-index: 20000; top: 0; left: 0; right: 0; height: 4px;
    pointer-events: none; overflow: hidden; background: #dcfce7;
}
.pa-identity-navigation-progress::after {
    content: ''; display: block; width: 40%; height: 100%; background: #00b94f;
    animation: pa-identity-loading 1s ease-in-out infinite;
}
@keyframes pa-identity-loading { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@media (prefers-reduced-motion: reduce) {
    .pa-id-user-link, .pa-id-team-link, .pa-id-avatar-link { transition: none; }
    .pa-identity-navigation-progress::after { animation: none; width: 100%; }
}