/* Battle Barge — Journal screen
   ================================================================
   Cross-battle journal entries + photos view, opened from the More
   drawer. Universe-agnostic styling — uses --bb-* tokens so HH and
   TOW palettes both work via the universe-attribute aliases at the
   foot of bb-tokens.css.
   ================================================================ */

.journal-screen {
    padding: var(--bb-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-4);
}

.journal-title {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xl);
    color: var(--bb-text-primary);
    margin: 0;
    letter-spacing: 0.04em;
}

.journal-subtab-bar {
    display: flex;
    gap: var(--bb-space-1);
    border-bottom: 1px solid var(--bb-border);
}

.journal-subtab {
    flex: 1 1 0;
    padding: var(--bb-space-3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bb-text-muted);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}

.journal-subtab:hover,
.journal-subtab:focus-visible {
    color: var(--bb-text-primary);
    outline: none;
}

.journal-subtab.active {
    color: var(--bb-accent-primary);
    border-bottom-color: var(--bb-accent-primary);
}

.journal-content {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-4);
    padding: 0;
    margin: 0;
}

.journal-subtab-panel {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-4);
}

.empty-state {
    text-align: center;
    color: var(--bb-text-muted);
    padding: var(--bb-space-6) var(--bb-space-4);
    font-style: italic;
}

/* -- Date group (top-level grouping by calendar day) ------------ */
.journal-date-group {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-3);
}

.journal-date-header {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-lg);
    color: var(--bb-accent-primary);
    letter-spacing: 0.04em;
    margin: 0;
    padding-bottom: var(--bb-space-1);
    border-bottom: 1px solid var(--bb-border);
}

/* -- Battle subgroup (one section per game within a date) ------- */
.journal-battle-subgroup,
.journal-photo-subgroup {
    background: var(--bb-bg-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-md);
    padding: var(--bb-space-3) var(--bb-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
}

.journal-battle-subheader {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-sm);
    color: var(--bb-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.journal-orphaned .journal-battle-subheader {
    color: var(--bb-text-muted);
    font-style: italic;
}

/* -- Entries ---------------------------------------------------- */
.journal-entries {
    display: flex;
    flex-direction: column;
    gap: var(--bb-space-2);
}

.journal-entry {
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    border-left: 3px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    padding: var(--bb-space-3);
}

.journal-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bb-space-2);
}

.journal-badge {
    font-size: var(--bb-text-base);
}

.journal-time {
    color: var(--bb-text-muted);
    font-size: var(--bb-text-xs);
}

.journal-content {
    color: var(--bb-text-primary);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.journal-from {
    color: var(--bb-text-muted);
    font-size: var(--bb-text-xs);
    margin: var(--bb-space-2) 0 0 0;
    font-style: italic;
}

.journal-mvp { border-left-color: var(--bb-accent-primary); }
.journal-result { border-left-color: var(--bb-info, #4299e1); }
.journal-memorable_moment { border-left-color: #c084fc; }

/* Inline photos attached to a single entry */
.journal-entry-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--bb-space-1);
    margin-top: var(--bb-space-2);
}
.journal-entry-photos .journal-photo-btn {
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
}
.journal-entry-photos .journal-photo-btn img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
    transition: transform 0.12s;
}
.journal-entry-photos .journal-photo-btn:hover img,
.journal-entry-photos .journal-photo-btn:focus-visible img {
    transform: scale(1.04);
    outline: none;
}

/* Click affordance on entries */
.journal-entry-clickable {
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.journal-entry-clickable:hover,
.journal-entry-clickable:focus-visible {
    border-color: var(--bb-accent-primary);
    outline: none;
}

/* Photo cards — make them buttons but keep the card look */
.journal-photo-grid .journal-photo-btn {
    padding: 0;
    border: 1px solid var(--bb-border);
    background: var(--bb-bg-base);
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s;
    color: inherit;
    font: inherit;
}
.journal-photo-grid .journal-photo-btn:hover,
.journal-photo-grid .journal-photo-btn:focus-visible {
    border-color: var(--bb-accent-primary);
    outline: none;
}

/* Edit textarea + caption input */
.journal-edit-textarea {
    width: 100%;
    background: var(--bb-bg-base);
    color: var(--bb-text-primary);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    padding: var(--bb-space-2) var(--bb-space-3);
    font-family: var(--bb-font-body);
    font-size: var(--bb-text-base);
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}
.journal-edit-textarea:focus {
    outline: none;
    border-color: var(--bb-accent-primary);
}

/* Lightbox — wider modal so photo can breathe.
   Use a flex column with header + footer pinned and the body shrinking
   the image to fit within the viewport. Without this the image eats
   70vh, pushing Save / Delete below the fold on phones. */
.lightbox-overlay .lightbox-modal {
    max-width: 48rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* override .bb-modal scroll — body handles it */
}
.lightbox-overlay .bb-modal-header,
.lightbox-overlay .bb-modal-footer {
    flex: 0 0 auto;
}
.lightbox-body {
    text-align: center;
    flex: 1 1 auto;
    min-height: 0;          /* allow flex child to shrink below content size */
    overflow-y: auto;       /* caption + meta scrolls inside body if cramped */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bb-space-2);
}
.lightbox-img {
    max-width: 100%;
    /* Take whatever vertical space remains, but never push buttons out. */
    max-height: 50vh;
    flex: 0 1 auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: var(--bb-radius-sm);
}

/* Modal close button (×) */
.btn-close {
    background: transparent;
    border: none;
    color: var(--bb-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--bb-space-2);
}
.btn-close:hover { color: var(--bb-text-primary); }

/* -- Photos grid ------------------------------------------------ */
.journal-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--bb-space-3);
}

.journal-photo-card {
    background: var(--bb-bg-base);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-radius-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.journal-photo-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.journal-photo-phase,
.journal-photo-caption,
.journal-photo-from {
    padding: var(--bb-space-1) var(--bb-space-2);
    font-size: var(--bb-text-xs);
}

.journal-photo-phase {
    color: var(--bb-accent-primary);
    font-family: var(--bb-font-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.journal-photo-caption {
    color: var(--bb-text-primary);
}

.journal-photo-from {
    color: var(--bb-text-muted);
    font-style: italic;
}

.journal-photo-local {
    position: absolute;
    top: var(--bb-space-1);
    right: var(--bb-space-1);
    background: rgba(0, 0, 0, 0.65);
    color: var(--bb-text-primary);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--bb-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}