/* ================================================================================
   STYLESHEET: detail.css
   CREATED:    2026-03-15
   MODIFIED:   2026-03-15
   PURPOSE:    Detail page v2 side-by-side layout — back bar, two-column main area,
               image viewer, metadata tabs, notes/comments/files panels, edit log
   ================================================================================ */

/* ========== DETAIL PAGE (v2 — side-by-side) ========== */
/* 2026-02-25 - Image left, info right, no tabs */

/* 2026-03-06 - overflow-y: auto so content scrolls under sticky backbar (glass effect) */
#page-detail {
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- Back Bar — 2026-03-06 matched to home/gallery topbar ---------- */
.detail-backbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 72px;
    padding: 14px var(--app-padding);
    background: rgba(250, 250, 252, 0.75);
    backdrop-filter: blur(40px) saturate(1.8);
    -webkit-backdrop-filter: blur(40px) saturate(1.8);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}
/* 2026-03-08 - Round icon buttons for home + back in detail header */
.detail-backbar .detail-nav-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #ececee;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.detail-nav-btn:hover {
    background: #ddd;
    color: #222;
}
.detail-nav-btn svg {
    width: 18px;
    height: 18px;
}

/* 2026-03-16 - Object nav counter centered in backbar */
.detail-nav-counter {
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    -webkit-user-select: none;
}
.detail-counter-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #999;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}
.detail-counter-arrow:hover {
    color: #555;
    background: rgba(0, 0, 0, 0.05);
}
.detail-counter-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}
.detail-counter-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #999;
    font-weight: 400;
    letter-spacing: 0.2px;
}
.detail-counter-num {
    display: inline-block;
    min-width: 2.2em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.detail-counter-sep {
    color: #bbb;
}

/* ---------- Description Popup ---------- */
.desc-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.15);
}
.desc-overlay.visible {
    display: block;
}
.desc-popup {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    max-height: 200px;
    background: #fff;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    overflow: hidden;
}
.desc-popup-content {
    padding: 12px 28px 12px 16px;
    overflow-y: auto;
    max-height: 190px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.desc-close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: none;
    background: #e5e5ea;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 18px;
    color: #8e8e93;
    text-align: center;
    z-index: 10;
}
.desc-close-btn:hover {
    background: #d1d1d6;
    color: #636366;
}

/* ---------- Two-Column Main Area ---------- */
.detail-main {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* LEFT COLUMN: Image + horizontal thumbnails */
/* 2026-02-25 - Changed to flex-basis for resizable divider */
.detail-left {
    /* 2026-03-15 - Left column fills remaining space; right panel is fixed 760px */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    /* 2026-03-15 - visible so image scales naturally instead of cropping on narrow windows */
    overflow: visible;
    /* 2026-03-07 - 36px bottom padding to prevent image clipping */
    /* 2026-03-15 - Use app-padding so left edge mirrors backbar and stays centered on resize */
    /* 2026-03-15 - Right padding 48px to avoid crowding between image and vtabs */
    padding: 24px 48px 36px var(--app-padding);
    /* outline: 2px dashed red; /* DEBUG */ */
}

/* 2026-03-15 - Column divider removed (fixed-width right panel, no drag resize) */
.column-divider {
    display: none;
}

/* 2026-02-25 - Centered under image, sticks to image not window bottom */
/* 2026-02-25 - Bottom padding prevents outline/thumbnail clipping by parent overflow:hidden */
.thumb-strip {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px 6px;
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
/* 2026-03-05 - Hide strip until all thumbs loaded, then fade in together */
.thumb-strip.strip-loading {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.thumb-strip.strip-loaded {
    opacity: 1;
}
/* 2026-03-03 - Fixed height, width follows image proportions (no crop) */
.strip-thumb {
    height: 52px;
    width: auto;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    display: block;
    flex-shrink: 0;
}
.strip-thumb:hover {
    opacity: 0.8;
}
.strip-thumb.active {
    opacity: 1;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* 2026-03-16 - Image caption below thumb strip — extends .caption-text from components.css */
.image-caption {
    padding: 0 8px 4px;
    margin-top: 6px;
    cursor: pointer;
    min-height: 20px;
}
.image-caption:hover {
    color: var(--text-secondary);
}
.image-caption.empty {
    color: #bbb;
    font-style: italic;
}
.image-caption-input {
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #555;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    padding: 4px 8px;
    font-family: inherit;
    outline: none;
}
.image-caption-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* RIGHT COLUMN: flex column with two scroll zones */
/* 2026-02-26 - Restructured: top (Title/Overview/Attributes) scrolls independently,
   bottom (Comments/Notes/Files) fills remaining space with own scroll */
/* 2026-02-27 - Centering uses transform for smooth animation */
/* 2026-03-08 - Always vertically center card + tabs in right column */
/* 2026-03-14 - Right column: fixed title position, no centering, no height changes */
.detail-right {
    /* 2026-03-16 - Right panel: fixed 720px, never shrinks; image column absorbs resize */
    flex: 0 0 760px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    /* outline: 2px dashed blue; /* DEBUG */ */
}
/* .detail-right.tab-open — commented out: title no longer moves between modes */
.detail-right-top {
    overflow-y: auto;
    /* 2026-03-15 - Modest right margin; app-padding only on left (outer) edge */
    margin: 0 60px 8px 0;
    padding: 120px 12px 20px 0;
    /* outline: 2px dashed green; /* DEBUG */ */
    border: none;
    z-index: 1;
    position: relative;
    min-height: 0;
    flex-shrink: 1;
}
/* 2026-03-08 - Old details-hidden collapse removed; card-collapsed used instead */
/* Bottom zone: Comments/Notes/Files — fills remaining height */
/* 2026-02-26 - Bottom group: tight padding, scrollbar near right edge */
/* 2026-02-27 - Added opacity/flex transition for details toggle */
/* 2026-03-14 - Bottom group: simple show/hide */
.detail-bottom-group {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    /* 2026-03-15 - Modest right padding to match right-top margin */
    padding: 0 60px 24px 8px;
    position: relative;
    flex: 1;
    min-height: 0;
}
/* 2026-03-08 - details-hidden bottom-group collapse removed */
/* 2026-02-26 - Subtle scrollbar matching comments textarea style */
.detail-right-top::-webkit-scrollbar,
.detail-bottom-group::-webkit-scrollbar {
    width: 6px;
}
.detail-right-top::-webkit-scrollbar-track,
.detail-bottom-group::-webkit-scrollbar-track {
    background: transparent;
}
.detail-right-top::-webkit-scrollbar-thumb,
.detail-bottom-group::-webkit-scrollbar-thumb {
    background: #c8c8cc;
    border-radius: 3px;
}
.detail-right-top::-webkit-scrollbar-thumb:hover,
.detail-bottom-group::-webkit-scrollbar-thumb:hover {
    background: #a8a8ac;
}

/* 2026-03-08 - Title block: clean museum style, no border */
/* 2026-03-14 - Detail right panel: 4 groups with tunable gaps
   --gap-title-info:  space between Title group and Info group
   --gap-info-desc:   space above Description divider (from Info or Title)
   --gap-desc-tabs:   space above Tabs divider (from Description or Info/Title)
   --gap-divider-pad: padding inside Description group (above & below text)
   Adjust these 4 values to control all vertical spacing. */
.detail-right-top {
    --gap-title-info: 25px;
    --gap-info-desc: 25px;
    --gap-desc-tabs: 25px;
    --gap-divider-pad: 20px;
}

/* Each group resets margin/padding; spacing comes from group gaps */
.detail-group {
    margin: 0;
    padding: 0;
}

/* GROUP 1 → GROUP 2 gap */
.detail-group-title + .detail-group-info {
    margin-top: var(--gap-title-info);
}

/* GROUP 2 → GROUP 3 gap (info visible before desc) */
.detail-group-info + .detail-group-desc {
    margin-top: var(--gap-info-desc);
}

/* GROUP 1 → GROUP 3 gap (no info, desc follows title directly) */
.detail-group-title + .detail-group-desc {
    margin-top: var(--gap-info-desc);
}

/* GROUP 3: Description — divider above, block layout for multi-line */
/* 2026-03-16 - Changed from inline flex to block for see more/less toggle */
.detail-group-desc {
    display: block;
    padding: 0;
}

/* GROUP 4: Tabs — when desc visible, its bottom border is the divider */
/* 2026-03-15 - Align title/creator with vtabs panel content (nav width + border + panel padding) */
.detail-groups {
    padding-left: 0;
}
/* 2026-03-15 - Tabs section always keeps its own full-width border-top */

.detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.detail-bottom-group.no-tab {
    display: none;
}

/* Typography */
.detail-title {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 0;
    cursor: default;
}
.detail-row2 {
    font-family: var(--font-family);
    font-size: 15px;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 0;
    cursor: default;
}
.detail-row3 {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.detail-group-info {
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text-tertiary);
}
.detail-creator {
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.15s ease;
}
.detail-creator:hover {
    color: var(--accent-color);
}
.detail-creator-nationality {
    font-style: italic;
    margin-top: 2px;
}
.detail-date {
    font-family: var(--font-family);
    font-size: 15px;
    color: var(--text-secondary);
    margin-top: 2px;
}
/* 2026-02-26 - Pin and Review round icon buttons */
.detail-action-btns {
    display: flex;
    gap: 4px;
}
.detail-action-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    /* 2026-02-26 - No background fill when not selected */
    background: transparent;
    color: #b0b0b0;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease, color 0.2s ease;
}
.detail-action-pill svg {
    width: 18px;
    height: 18px;
}
/* 2026-03-03 - CSS pseudo tooltips removed; using real JS tooltips (seg-tooltip class) */
.detail-action-pill:hover {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.08);
}
/* 2026-03-11 - Consistent active states: solid bg + white icon, matching gallery badges */
.detail-action-pill.active {
    color: #fff;
}
.detail-action-pill.active svg {
    stroke: #fff;
}
.detail-action-checked.active {
    background: rgb(34, 153, 79);
}
.detail-action-pin.active {
    background: rgb(250, 36, 59);
}
.detail-action-pin.active svg {
    fill: #fff;
}
.detail-action-review.active {
    background: rgb(123, 97, 194);
}
.detail-action-review.active svg {
    stroke: none;
    fill: #fff;
}

/* 2026-03-08 - Info sections: clean divider, generous padding */
.info-section {
    padding: 0;
    border-top: 1px solid #e8e8e8;
}
/* 2026-02-26 - Lighter weight, wider spacing, aligned with body text */
.info-section-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-bottom: 8px;
    padding-left: 12px;
}
.info-section-header .count {
    text-transform: none;
    letter-spacing: 0;
}

/* 2026-02-26 - Accordion: collapsible section headers (no chevron, hover indicates clickable) */
.info-section-header.accordion-toggle {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.info-section-header.accordion-toggle:hover {
    color: var(--text-secondary);
}
.accordion-body {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    opacity: 1;
}
.info-section.collapsed .accordion-body {
    max-height: 0;
    opacity: 0;
}
/* 2026-03-14 - Section accordion header with chevron (museum-standard collapsible sections) */
.section-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.section-accordion-header .info-section-header {
    margin-bottom: 0;
    padding-left: 0;
}
.section-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    color: #999;
}
.info-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}
@media (hover: hover) {
    .section-accordion-header:hover {
        background: rgba(0,0,0,0.03);
        border-radius: 8px;
    }
}
/* 2026-03-15 - Metadata vertical tabs (Met Museum style) — nav left, content right */
#sectionMetadataTabs {
    padding-top: var(--gap-divider-pad, 20px);
    margin-top: var(--gap-desc-tabs, 25px);
}
/* 2026-03-15 - Detail page uses .vtabs from components.css — no overrides needed */
/* 2026-02-26 - Segmented tab bar: fixed, position-locked */
/* 2026-02-26 - Tighter height for Apple toolbar feel */
/* 2026-02-26 - Subtle shadow below tab bar to separate from list content */
/* 2026-02-27 - Added opacity/max-height transition for details toggle */
/* 2026-03-14 - Old bottom tab bar hidden; replaced by metadata icon tabs */
.bottom-tab-bar {
    display: none;
}
/* 2026-03-08 - details-hidden tab bar override removed */
/* 2026-02-27 - Removed divider; frames provide visual separation */
.bottom-tab-bar .bottom-tab-segments {
    /* centered by parent flexbox */
}
/* 2026-02-27 - Floating note-add-btn removed; inline input bars replace it */
.bottom-tab-segments {
    display: flex;
    gap: 4px;
}
/* 2026-03-08 - Three-state tab icons: faint outline (empty), heavier outline (content), filled (active) */
.bottom-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    background: transparent;
    color: #c0c0c0;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}
/* 2026-03-14 - Image tab removed (desktop-only, no narrow mode) */
.image-tab-btn {
    display: none;
}
/* 2026-03-08 - Rich HTML tooltips for tab icons */
/* 2026-03-10 - General tooltip class (app-tooltip alias) with slower fade */
.tab-tooltip,
.app-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.tab-tooltip.visible,
.app-tooltip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tab-tooltip-inner {
    background: rgba(40, 40, 42, 0.75);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 0.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 12px;
    min-width: 100px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18),
                0 1px 4px rgba(0, 0, 0, 0.08);
}
.tab-tooltip-title {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    font-family: var(--font-family);
}
.tab-tooltip-desc {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 2px;
    line-height: 1.3;
    font-family: var(--font-family);
}
/* 2026-03-08 - Arrow removed for cleaner look */
.bottom-tab-btn:hover {
    color: var(--text-secondary);
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.03);
}
/* 2026-03-11 - Has content: strong outline matching icon color */
.bottom-tab-btn.has-content {
    color: #666;
    border-color: #666;
    border-width: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.bottom-tab-btn.has-content:hover {
    color: var(--text-secondary);
    border-color: var(--text-secondary);
}
/* 2026-03-08 - Active/selected: filled background */
.bottom-tab-btn.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
.bottom-tab-btn.active:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
    opacity: 0.85;
}
/* 2026-03-08 - Old details-hidden tab button overrides removed */
.bottom-tab-btn svg {
    width: 19px;
    height: 19px;
}
/* Tab content panels */
/* 2026-02-27 - Rounded frame around each tab's content */
/* 2026-02-27 - Equal padding on sides and bottom */
.bottom-tab-content {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    /* 2026-02-27 - Equal padding on all sides */
    padding: 8px;
}
.bottom-tab-content.active {
    display: flex;
}
/* 2026-03-08 - Museum-style label-value rows */
/* 2026-03-14 - Info rows: labels dim (tertiary), values readable (secondary) */
/* 2026-03-15 - Info rows: sized/spaced to match vtab labels, no dividers */
.info-field {
    display: flex;
    align-items: baseline;
    padding: 10px 0;
    line-height: 1.4;
}
.info-label {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    width: 100px;
    flex-shrink: 0;
}
.info-value {
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 2026-03-14 - Deprecated: replaced by section accordions */
/*
.info-section-body.truncated .info-field {
    display: none;
}
.info-section-body.truncated .info-field[data-field="date"],
.info-section-body.truncated .info-field[data-field="category"] {
    display: flex;
}
.attr-toggle {
    display: inline-block;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-color);
    cursor: pointer;
    padding: 10px 0 2px;
    user-select: none;
    -webkit-user-select: none;
}
.attr-toggle:hover {
    text-decoration: underline;
}
*/

/* 2026-03-14 - Inline description below attributes */
/* 2026-03-14 - Description: matches tab label style, no extra border */
/* 2026-03-14 - Description label matches tab label style */
.detail-group-desc .info-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-primary);
}
/* 2026-03-16 - Description: multi-line with see more/less toggle */
.desc-inline-body {
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-secondary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.desc-inline-body.expanded {
    -webkit-line-clamp: unset;
}
.desc-see-more {
    font-size: 12px;
    color: var(--text-tertiary);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    margin-top: 4px;
    display: none;
}
.desc-see-more:hover {
    color: var(--text-secondary);
}

/* 2026-03-04 - Edit Log page styles */
.log-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}
.log-back-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.log-back-btn:hover {
    background: #f0f0f0;
    color: var(--text-primary);
}
.log-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.log-list {
    padding: 12px 16px 12px 116px;
    overflow-y: auto;
    max-height: calc(100vh - 140px);
}
.log-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.log-entry:last-child {
    border-bottom: none;
}
/* 2026-03-05 - Clickable object thumbnail on left of log entry */
.log-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    overflow: visible;
    cursor: pointer;
    background: #f0f0f0;
    position: relative;
}
/* 2026-03-09 - Creator portrait badge on log entries */
.log-creator-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    background: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.log-creator-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.log-creator-badge .log-creator-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: #999;
    font-family: Georgia, 'Times New Roman', serif;
}
.log-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px;
}
.log-thumb.resource-thumb > img {
    object-fit: contain;
    background: #f5f5f7;
}
.log-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #bbb;
    border-radius: 5px;
    overflow: hidden;
}
.log-body {
    flex: 1;
    min-width: 0;
}
.log-entry-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
}
.log-object-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    text-decoration: none;
    display: block;
    margin-top: 1px;
}
.log-object-link:hover {
    color: var(--accent);
    text-decoration: underline;
}
.log-object-link.no-link {
    cursor: default;
    pointer-events: none;
}
.log-change {
    font-size: 13px;
    color: #666;
    margin: 3px 0 0;
    line-height: 1.4;
}
.log-field-name {
    font-weight: 600;
    color: #555;
}
.log-old-value {
    color: #c0392b;
    text-decoration: line-through;
}
.log-new-value {
    color: #27ae60;
}
.log-meta {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}
.log-empty {
    text-align: center;
    padding: 40px 16px;
    color: #999;
    font-size: 14px;
}
/* 2026-03-07 - Log page tab + content indentation */
#page-log .settings-tabs {
    padding-left: 76px;
}
/* 2026-03-07 - Log filter bar */
.log-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 116px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
    flex-wrap: wrap;
}
.log-filter-select {
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    outline: none;
}
.log-filter-btn {
    font-size: 12px;
    padding: 4px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.log-filter-btn.active {
    background: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}
/* 2026-03-05 - Unread blue dot (Apple Mail style) */
.log-unread-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #007aff;
    margin-top: 6px;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
/* 2026-03-06 - Hide dot but keep space so layout doesn't shift */
.log-entry.is-read .log-unread-dot {
    visibility: hidden;
}
/* 2026-03-06 - Stronger dimming (0.3) and include thumbnail */
.log-entry.is-read .log-body,
.log-entry.is-read .log-thumb {
    opacity: 0.3;
}
/* 2026-03-05 - Right-click context menu */
.log-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 4px 0;
    z-index: 1000;
    display: none;
    min-width: 140px;
}
.log-context-menu-item {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text-primary);
}
.log-context-menu-item:hover {
    background: #f0f0f0;
}

/* 2026-03-06 - Archive viewer styles */
.archive-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
}
.archive-entry:last-child {
    border-bottom: none;
}
.archive-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 5px;
    overflow: hidden;
    background: #f0f0f0;
}
.archive-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.archive-type-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    margin-top: 2px;
}
.archive-type-badge.type-comment { background: #5856d6; }
.archive-type-badge.type-note    { background: #34c759; }
.archive-type-badge.type-file    { background: #ff9500; }
.archive-type-badge.type-object  { background: #ff3b30; }
.archive-type-badge.type-category_file { background: #007aff; }
.archive-body {
    flex: 1;
    min-width: 0;
}
.archive-preview {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.archive-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}
.archive-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    align-items: center;
}
.archive-btn {
    font-size: 11px;
    font-family: var(--font-family);
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.archive-btn:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}
.archive-btn.danger {
    color: #ff3b30;
    border-color: rgba(255, 59, 48, 0.3);
}
.archive-btn.danger:hover {
    background: rgba(255, 59, 48, 0.08);
    border-color: #ff3b30;
}
.archive-btn.restore {
    color: #34c759;
    border-color: rgba(52, 199, 89, 0.3);
}
.archive-btn.restore:hover {
    background: rgba(52, 199, 89, 0.08);
    border-color: #34c759;
}

/* Scrollbar: thin, inset from frame edges */
/* 2026-02-27 - 2px right gap, 12px top/bottom to clear border radius */
.bottom-tab-content::-webkit-scrollbar {
    width: 7px;
}
.bottom-tab-content::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 12px;
    margin-bottom: 12px;
}
.bottom-tab-content::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
    border-right: 2px solid transparent;
    background-clip: padding-box;
}

/* 2026-02-27 - note-add-btn CSS removed; replaced by inline input bars */

/* 2026-02-26 - Selection highlight bar (Apple Notes style) */
.note-item,
.file-item,
.comment-item {
    position: relative;
}
.note-item.selected,
.file-item.selected,
.comment-item.selected {
    background: rgba(107, 129, 144, 0.12);
    border-radius: 8px;
}
.note-item.selected:hover,
.file-item.selected:hover,
.comment-item.selected:hover {
    background: rgba(107, 129, 144, 0.15);
}
/* 2026-03-15 - Rewritten: buttons are flex children (not absolute), visibility toggle */
/* 2026-03-15 - Buttons visible on hover OR selection (was selection-only, unreachable) */
.list-item-menu,
.list-item-view {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    visibility: hidden;
    align-self: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.list-item-menu:hover,
.list-item-view:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}
.note-item:hover > .list-item-menu,
.note-item:hover > .list-item-view,
.comment-item:hover > .list-item-menu,
.file-item:hover > .list-item-menu,
.file-item:hover > .list-item-view,
.selected > .list-item-menu,
.selected > .list-item-view {
    visibility: visible;
}
/* 2026-03-10 - Note viewer overlay (read-only) */
.note-viewer-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.18);
}
.note-viewer-overlay.visible {
    display: block;
}
.note-viewer {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 750px;
    min-width: 320px;
    min-height: 240px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    background: #ffffff;
    border-radius: 18px;
    padding: 0 4px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
.note-viewer-content {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 14px 20px 14px 16px;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.note-viewer-content::-webkit-scrollbar {
    width: 5px;
}
.note-viewer-content::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 14px;
    margin-bottom: 4px;
}
.note-viewer-content::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
}
.note-viewer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6px 20px 0 4px;
}
/* 2026-02-26 - Action menu popup (Edit/Delete) */
.action-menu {
    display: none;
    position: fixed;
    z-index: 450;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
    min-width: 140px;
    overflow: hidden;
}
.action-menu.visible {
    display: block;
}
.action-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
}
.action-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
.action-menu-item + .action-menu-item {
    border-top: 1px solid #f0f0f0;
}
.action-menu-item.destructive {
    color: #FF3B30;
}

/* 2026-02-27 - Hide dividers above and below the selected item */
/* Selected item's border-top (divider above) */
.comment-item.selected .comment-body,
.note-item.selected .note-body,
.file-item.selected .file-info {
    border-top-color: transparent;
}
/* Next item's border-top (divider below the selected item) */
.comment-item.selected + .comment-item .comment-body,
.note-item.selected + .note-item .note-body,
.file-item.selected + .file-item .file-info {
    border-top-color: transparent;
}

/* Note list items */
/* 2026-02-26 - Note list: Apple Music style rows */
/* 2026-02-26 - Left margin matches comment row inset (dot 18px + gap 8px) */
/* 2026-02-26 - Symmetric margins matching comment items */
/* 2026-02-27 - Reduced horizontal margin (frame provides 8px) */
.note-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 4px 10px;
    margin: 0 4px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}
/* 2026-02-27 - Apple-style hover: highlight hides both divider lines */
.note-item:hover {
    background: #f5f5f5;
    border-radius: 8px;
}
.note-item:hover .note-body {
    border-top-color: transparent;
}
.note-item:hover + .note-item .note-body {
    border-top-color: transparent;
}
/* 2026-02-27 - Divider as border-top so hover can hide above + below */
.note-body {
    flex: 1;
    min-width: 0;
    padding: 9px 0;
    border-top: 1px solid #e0e0e0;
}
.note-item:first-child .note-body {
    border-top: none;
}
.note-text {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 2026-03-04 - Links in notes and comments */
.note-text a, .comment-text a {
    color: #4A90D9;
    text-decoration: none;
}
.note-text a:hover, .comment-text a:hover {
    text-decoration: underline;
}
.note-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}


/* 2026-02-26 - Note Editor Overlay */
/* 2026-02-26 - Note Editor: clean, warm, minimal — one accent color */
.note-editor-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.18);
}
.note-editor-overlay.visible {
    display: block;
    pointer-events: auto;
}
.note-editor {
    /* 2026-02-26 - Absolute + centered by default, drag JS overrides left/top */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* 2026-02-26 - Default 650x750, centered */
    width: 650px;
    height: 750px;
    min-width: 320px;
    min-height: 240px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 40px);
    background: #ffffff;
    border-radius: 18px;
    border: none;
    padding: 0 4px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
/* Drag handle at top of editor window */
.note-editor-dragbar {
    flex-shrink: 0;
    height: 28px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.note-editor-dragbar:active {
    cursor: grabbing;
}
/* Subtle drag indicator pill */
.note-editor-dragbar::after {
    content: '';
    width: 36px;
    height: 4px;
    background: #d8d8d8;
    border-radius: 2px;
}
.note-editor-textarea {
    flex: 1;
    min-height: 0;
    width: 100%;
    /* Right padding accounts for scrollbar gutter */
    padding: 14px 20px 14px 16px;
    font-size: 14px;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
    outline: none;
    resize: none;
    overflow-y: auto;
    line-height: 1.6;
    box-sizing: border-box;
}
.note-editor-textarea::-webkit-resizer {
    display: none;
}
.note-editor-textarea::placeholder {
    color: #bbb;
}
.note-editor-textarea::-webkit-scrollbar {
    width: 5px;
}
.note-editor-textarea::-webkit-scrollbar-track {
    background: transparent;
    /* 2026-02-26 - Scrollbar starts below top padding, not at window edge */
    margin-top: 14px;
    margin-bottom: 4px;
}
.note-editor-textarea::-webkit-scrollbar-thumb {
    background: #d4d4d4;
    border-radius: 3px;
}
.note-editor-meta {
    font-size: 12px;
    color: #aaa;
    padding: 0 20px 0 16px;
}
.note-editor-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px 0 4px;
}
.note-editor-actions-right {
    display: flex;
    gap: 16px;
    align-items: center;
}
.note-editor-btn {
    padding: 6px 4px;
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-family);
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.note-editor-btn:hover {
    opacity: 0.7;
}
.note-editor-btn.cancel {
    color: #999;
    transition: color 0.15s ease;
}
.note-editor-btn.cancel:not(.dirty):hover {
    color: #ccc;
}
.note-editor-btn.cancel.dirty {
    color: var(--accent-color);
    font-weight: 600;
}
.note-editor-btn.save {
    color: var(--accent-color);
    font-weight: 600;
}
.note-editor-btn.delete {
    color: #c4c4c4;
}
.note-editor-btn.delete:hover {
    color: #999;
    opacity: 1;
}

/* 2026-03-11 - Resize handle (bottom-right corner) */
.note-editor-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    cursor: nwse-resize;
}
.note-editor-resize::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
}

/* 2026-02-26 - Confirmation bar inside note editor */
/* 2026-02-26 - Modal confirmation dialog */
.note-confirm-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600;
    background: rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
}
.note-confirm-modal.visible {
    display: flex;
}
.note-confirm-dialog {
    background: #f0f0f0;
    border-radius: 14px;
    padding: 24px 28px 22px;
    min-width: 280px;
    max-width: 380px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
    text-align: center;
}
.note-confirm-msg {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.4;
}
.note-confirm-btns {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}
/* Pill buttons — white background default */
.note-confirm-btns button {
    flex: 1;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-family);
    border: none;
    border-radius: 20px;
    background: #fff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: opacity 0.12s ease;
    box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.08);
}
.note-confirm-btns button:hover {
    opacity: 0.8;
}
/* Primary (easy out) — blue filled */
.note-confirm-btns .confirm-primary {
    background: #007AFF;
    color: #fff;
    box-shadow: none;
}

/* 2026-02-26 - Files section (PDF list) */
.files-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 2026-02-26 - File list: Apple Music style rows */
/* 2026-02-26 - Left margin matches comment/note inset; right margin matches delete btn area */
/* 2026-02-26 - Tighter padding, rounded corners for hover/selection */
/* 2026-02-26 - Symmetric margins matching comment items */
/* 2026-02-27 - Reduced horizontal margin (frame provides 8px) */
.file-item {
    display: flex;
    align-items: center;
    padding: 2px 10px;
    margin: 0 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
/* 2026-02-27 - Apple-style hover: highlight hides both divider lines */
.file-item:hover {
    background: #f5f5f5;
}
.file-item:hover .file-info {
    border-top-color: transparent;
}
.file-item:hover + .file-item .file-info {
    border-top-color: transparent;
}
/* 2026-02-27 - Divider as border-top so hover can hide above + below */
.file-info {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    border-top: 1px solid #e0e0e0;
}
.file-item:first-child .file-info {
    border-top: none;
}
/* 2026-02-26 - Bumped to 14px for primary text prominence */
.file-name {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 2026-02-26 - Lighter meta color, tighter coupling to name */
.file-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #b0b0b0;
    margin-top: 1px;
}
.files-empty {
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 12px 14px;
}

/* 2026-03-08 - Attributes body: now renders as info-field rows */
.info-section-body {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-primary);
}
/* 2026-02-26 - Labels (Description:, Culture:, etc.) use lighter gray */
.info-section-body em {
    color: var(--text-tertiary);
    font-style: normal;
}

/* ========== DEBUG RULERS — uncomment to enable ========== */
/* 2026-03-15 - Colored outlines for layout debugging.
   Uncomment the block below to show boxes around all text elements.
   Red = panes, Blue/Green = right panel zones,
   Orange = title, Pink = description, Cyan = tabs nav,
   Magenta = tab panels, Lime = info fields, Yellow = info labels/values */
/* All rulers gated by body.debug-rulers */
body.debug-rulers .detail-left                    { outline: 2px dashed red; position: relative; }
body.debug-rulers .detail-right                   { outline: 2px dashed blue; position: relative; }
body.debug-rulers .detail-right-top               { outline: 2px dashed green; position: relative; }
body.debug-rulers .detail-groups                  { outline: 2px dashed orange; position: relative; }
body.debug-rulers .detail-group-title             { outline: 1px solid orange; position: relative; }
body.debug-rulers .detail-group-info              { outline: 1px solid coral; position: relative; }
body.debug-rulers .detail-group-desc              { outline: 1px solid pink; position: relative; }
body.debug-rulers .detail-title                   { background: rgba(255,165,0,0.08); }
body.debug-rulers .detail-row2                    { background: rgba(255,165,0,0.08); }
body.debug-rulers .detail-creator                 { background: rgba(255,127,80,0.08); }
body.debug-rulers #sectionMetadataTabs            { outline: 2px dashed purple; position: relative; }
body.debug-rulers .vtabs-nav                      { outline: 1px solid cyan; position: relative; }
body.debug-rulers .vtabs-panels                   { outline: 1px solid magenta; position: relative; }
body.debug-rulers .vtab                           { outline: 1px solid rgba(0,200,200,0.4); position: relative; }
body.debug-rulers .info-field                     { outline: 1px solid rgba(0,200,0,0.3); position: relative; }
body.debug-rulers .info-label                     { background: rgba(255,255,0,0.15); }
body.debug-rulers .info-value                     { background: rgba(0,255,0,0.08); }
body.debug-rulers .info-section                   { outline: 1px dashed gray; }

/* Debug labels — small tags in corner of each box */
body.debug-rulers .detail-left::before            { content: '1-L'; }
body.debug-rulers .detail-right::before           { content: '2-R'; }
body.debug-rulers .detail-right-top::before       { content: '3-RT'; }
body.debug-rulers .detail-groups::before          { content: '4-GR'; }
body.debug-rulers .detail-group-title::before     { content: '5-TI'; }
body.debug-rulers .detail-group-info::before      { content: '6-IN'; }
body.debug-rulers .detail-group-desc::before      { content: '7-DE'; }
body.debug-rulers #sectionMetadataTabs::before    { content: '8-TB'; }
body.debug-rulers .vtabs-nav::before              { content: '9-TN'; }
body.debug-rulers .vtabs-panels::before           { content: '10-TP'; }
body.debug-rulers .detail-left::before,
body.debug-rulers .detail-right::before,
body.debug-rulers .detail-right-top::before,
body.debug-rulers .detail-groups::before,
body.debug-rulers .detail-group-title::before,
body.debug-rulers .detail-group-info::before,
body.debug-rulers .detail-group-desc::before,
body.debug-rulers #sectionMetadataTabs::before,
body.debug-rulers .vtabs-nav::before,
body.debug-rulers .vtabs-panels::before {
    position: absolute;
    top: 0; left: 0;
    font-size: 9px;
    font-weight: 700;
    font-family: monospace;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 1px 4px;
    border-radius: 0 0 4px 0;
    z-index: 9999;
    pointer-events: none;
    line-height: 1.3;
}

/* 2026-03-15 - Inline thumbnail: hidden by default, shown in single-pane mode */
.detail-inline-thumb {
    display: none;
}
/* 2026-03-15 - Text wrapper: transparent in two-pane mode (no layout effect) */
.detail-groups-text {
    flex: 1;
    min-width: 0;
}

/* ========== RESPONSIVE: single-pane below 1200px ========== */
/* 2026-03-16 - Stack image above info; page scrolls until title sticks at top */
@media (max-width: 1200px) {
    /* Let page-detail be the single scroll container */
    #page-detail .detail-main {
        flex-direction: column;
        overflow: visible;
        flex: none;
    }
    .detail-left {
        flex: none;
        height: 340px;
        padding: 16px var(--app-padding);
        overflow: hidden;
    }
    /* 2026-03-16 - Hide thumb strip and caption in narrow mode */
    .thumb-strip,
    .image-caption {
        display: none !important;
    }
    /* 2026-03-16 - Strip frame/shadow from image wrapper in narrow mode */
    .image-wrapper {
        border: none !important;
        box-shadow: none !important;
    }
    .image-container {
        padding: 0;
    }
    /* 2026-03-16 - Right panel: fixed to viewport height so tabs scroll internally */
    .detail-right {
        flex: none;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        height: calc(100vh - 72px);
        padding: 0 24px;
        display: flex;
        flex-direction: column;
    }
    .detail-right-top {
        margin: 0;
        padding-top: 24px;
        overflow-y: visible;
        flex-shrink: 0;
    }
    .detail-bottom-group {
        padding: 0 0 24px 0;
        flex: 1;
        min-height: 0;
    }
    /* 2026-03-16 - Inline thumbnail hidden; real image shows in top pane */
    .detail-inline-thumb {
        display: none;
    }
    .detail-groups {
        margin-left: 0;
    }
}