/* Builder-specific overrides */

/* Dark blue nav bar for admin */
.nav {
    background: #1e3a5f !important;
    border-bottom-color: #15293f !important;
}

.nav-brand {
    color: #ffffff !important;
}

.nav-breadcrumb span {
    color: rgba(255,255,255,0.7) !important;
}

.nav-breadcrumb span:hover {
    color: #ffffff !important;
}

.nav-breadcrumb span.current {
    color: #ffffff !important;
}

.nav-breadcrumb i {
    color: rgba(255,255,255,0.4) !important;
}

.nav-btn {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #ffffff !important;
}

.nav-btn.active {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #1e3a5f !important;
}

/* Yuman nav group: a shared label + Read / Add buttons */
.nav-yuman-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border-radius: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
}
.nav-yuman-label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}
.nav-yuman-label i { margin-right: 4px; opacity: .8; }
.nav-yuman-btn {
    padding: 5px 11px !important;
    font-size: 12.5px !important;
}

/* Override frontend ::before bullets - we use .subtimeline-dot instead */
.subtimeline-item::before {
    display: none !important;
}

.builder-mode .day-row {
    position: relative;
}

/* Side panel on RIGHT side */
.day-action-panel {
    position: absolute;
    right: -50px;
    top: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.day-row:hover .day-action-panel {
    opacity: 1;
}

.panel-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--mist);
    background: white;
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    box-shadow: var(--shadow);
}

.panel-btn:hover {
    background: var(--cream);
    color: var(--gold);
    border-color: var(--gold);
}

.panel-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Completed day indicator */
.panel-btn.complete-active {
    background: #dcfce7;
    color: #16a34a;
    border-color: #86efac;
}

.panel-btn.complete-active:hover {
    background: #bbf7d0;
    color: #15803d;
    border-color: #4ade80;
}

.day-row.day-complete .day-row-content {
    border-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), var(--shadow);
}

.day-row.day-complete::after {
    content: '✓';
    position: absolute;
    right: -80px;
    top: 12px;
    width: 24px;
    height: 24px;
    background: #22c55e;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

/* Inline editable text - contenteditable */
.editable-text {
    cursor: text;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.15s;
    min-height: 1.4em;
}

.editable-text:hover {
    background: rgba(139,115,85,0.05);
    border-color: var(--pearl);
}

.editable-text:focus {
    background: white;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(139,115,85,0.15);
    outline: none;
}

.editable-text:empty::before {
    content: attr(data-placeholder);
    color: var(--stone);
    font-style: italic;
}

/* Insert day button between days */
.insert-day-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24px;
    margin: -4px 0;
    position: relative;
}

.insert-day-btn button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px dashed var(--pearl);
    background: white;
    color: var(--stone);
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    font-size: 11px;
}

.insert-day-btn:hover button {
    opacity: 1;
}

.insert-day-btn button:hover {
    border-color: var(--gold);
    border-style: solid;
    color: var(--gold);
    transform: scale(1.1);
}

/* Event row actions - toolbar at TOP of event */
.subtimeline-item {
    position: relative;
}

.event-actions {
    position: absolute;
    right: 0;
    bottom: calc(100% - 2px); /* Float ABOVE the row so it never covers content */
    top: auto;
    transform: none;
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none; /* While hidden, don't let the empty area above the row summon it */
    transition: opacity 0.2s;
    background: white;
    padding: 4px 6px;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    z-index: 30;
}

.subtimeline-item:hover .event-actions,
.event-actions:hover {
    opacity: 1;
    pointer-events: auto; /* Once shown, hovering the menu itself keeps it shown */
}

/* Spotlight: while hovering the action menu, dim the rest of the day so the
   element being edited stands out. The active row stays fully lit and on top. */
.subtimeline-list:has(.event-actions:hover) .subtimeline-item {
    opacity: 0.28;
    transition: opacity 0.2s;
}
.subtimeline-list:has(.event-actions:hover) .subtimeline-item:has(.event-actions:hover) {
    opacity: 1;
    z-index: 25;
}

.mini-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--mist);
    background: white;
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.mini-btn:hover {
    background: var(--cream);
    color: var(--gold);
}

.mini-btn.danger:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Source dropdown (event/subevent knowledge attribution) */
.source-select {
    height: 24px;
    max-width: 130px;
    border-radius: 4px;
    border: 1px solid var(--mist);
    background: white;
    color: var(--stone);
    font-size: 11px;
    padding: 0 4px;
    cursor: pointer;
    font-family: inherit;
}
.source-select:hover { border-color: var(--gold); }
.source-select.has-source {
    border-color: var(--gold);
    color: var(--ink);
    background: var(--cream);
}
.source-tag-slot:empty { display: none; }
.source-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 1px 8px;
    background: var(--cream);
    border: 1px solid var(--pearl);
    border-radius: 999px;
    font-size: 10.5px;
    color: var(--stone);
    white-space: nowrap;
}
.source-tag i { font-size: 9px; color: var(--gold); }
.location-input {
    height: 24px;
    max-width: 120px;
    padding: 0 6px;
    border: 1px solid var(--pearl);
    border-radius: 4px;
    background: #fff;
    font-size: 11px;
    color: var(--stone);
    font-family: inherit;
}
.location-input:hover { border-color: var(--gold); }
.location-input:focus { outline: none; border-color: var(--gold); }
.location-input.has-location {
    border-color: var(--gold);
    color: var(--ink);
    background: var(--cream);
}
.location-tag-slot:empty { display: none; }
.location-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    padding: 1px 8px;
    background: var(--cream);
    border: 1px solid var(--pearl);
    border-radius: 999px;
    font-size: 10.5px;
    color: var(--stone);
    white-space: nowrap;
}
.location-tag i { font-size: 9px; color: var(--gold); }

/* Drag and drop for events */
.subtimeline-list {
    margin-left: 90px; /* Space for time on left */
    padding-left: 20px; /* Space between timeline and content */
    border-left: 2px solid var(--pearl);
}

.subtimeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
}

/* Bullet/dot centered on timeline */
.subtimeline-dot {
    position: absolute;
    left: -26px; /* Center on the border-left */
    top: 14px;
    width: 10px;
    height: 10px;
    background: var(--gold);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--pearl);
    z-index: 2;
    display: block !important;
}

.subtimeline-item.night .subtimeline-dot {
    background: var(--slate);
}

/* Time input to the LEFT of the timeline */
.subtimeline-time {
    position: absolute;
    left: -105px; /* In the margin, to the LEFT of the border */
    top: 10px;
    width: 75px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gold);
    text-align: right;
}

/* Drag handle - positioned on bullet, replaces bullet on hover */
.drag-handle {
    position: absolute;
    left: -30px;
    top: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--stone);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 11px;
    background: white;
    border-radius: 50%;
    z-index: 3;
}

.subtimeline-item:hover .drag-handle {
    opacity: 1;
}

.subtimeline-item:hover .subtimeline-dot {
    opacity: 0;
}

.drag-handle:hover {
    color: var(--gold);
    background: var(--cream);
}

.subtimeline-item.dragging {
    opacity: 0.4;
}

.subtimeline-item.dragging .drag-handle {
    cursor: grabbing;
}

.subtimeline-item.drag-over {
    border-top: 3px solid var(--gold);
    padding-top: 3px;
    margin-top: -3px;
}

/* Resource multi-select */
.resource-card.selected {
    outline: 2px solid var(--gold);
    background: rgba(139,115,85,0.1);
}

.resource-card[draggable="true"] {
    cursor: grab;
}

.resource-card.dragging {
    opacity: 0.4;
}

/* Drop zone for events to receive resources */
.subtimeline-item.drop-target {
    background: rgba(139,115,85,0.15);
    box-shadow: 0 0 0 2px var(--gold);
}

/* Event content wrapper */
.subtimeline-content {
    flex: 1;
    min-width: 0;
}

/* Subevent timeline items - same alignment, smaller bullet and lighter text */
.subtimeline-item.subevent {
    padding: 6px 0;
    overflow: visible;
}

.subtimeline-item.subevent .subtimeline-dot,
.subtimeline-item.subevent .subevent-dot {
    width: 6px !important;
    height: 6px !important;
    background: var(--stone) !important;
    left: -24px !important; /* Same alignment, smaller dot */
    top: 10px !important;
    border-width: 1px !important;
}

.subtimeline-item.subevent .subtimeline-time {
    font-size: 0.65rem;
    color: var(--stone);
    left: -105px; /* Same as parent events */
    width: 75px;
    top: 6px;
}

.subtimeline-item.subevent .subtimeline-desc {
    font-size: 0.75rem;
    color: var(--slate);
}

.subtimeline-item.subevent .drag-handle {
    left: -28px;
    top: 6px;
    width: 14px;
    height: 14px;
    font-size: 9px;
    opacity: 0;
}

.subtimeline-item.subevent:hover .drag-handle {
    opacity: 1;
}

.subtimeline-item.subevent:hover .subtimeline-dot {
    opacity: 0;
}

.subtimeline-item.subevent .event-actions {
    opacity: 0;
    bottom: calc(100% - 2px);
    top: auto;
}

.subtimeline-item.subevent:hover .event-actions {
    opacity: 1;
}

/* End time marker - part of main timeline */
.subtimeline-item.end-marker {
    padding: 6px 0;
}

.subtimeline-item.end-marker .subtimeline-dot,
.subtimeline-item.end-marker .end-dot {
    width: 6px !important;
    height: 6px !important;
    background: var(--stone) !important;
    left: -24px !important;
    top: 10px !important;
}

.subtimeline-item.end-marker .subtimeline-time.end-time {
    font-size: 0.65rem;
    color: var(--stone);
    font-style: italic;
    left: -105px;
    width: 75px;
    top: 6px;
}

.subtimeline-item.end-marker .subtimeline-desc.end-desc {
    font-size: 0.7rem;
    color: var(--stone);
    font-style: italic;
    text-transform: uppercase;
}

.subtimeline-item.end-marker .event-actions {
    opacity: 0;
}

.subtimeline-item.end-marker:hover .event-actions {
    opacity: 1;
}

/* Placeholder for subevents - no visual style */
.subevents-placeholder {
    display: contents;
}

/* Hidden items - shown in builder but marked */
.subtimeline-item.hidden-item {
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.03) 10px,
        rgba(0,0,0,0.03) 20px
    );
    opacity: 0.7;
}

.subtimeline-item.hidden-item::after {
    content: 'HIDDEN';
    position: absolute;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 700;
    color: #c00;
    background: #fee;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

.mini-btn.hidden-active {
    color: #c00 !important;
    background: #fee !important;
}

/* Hidden resources */
.resource-card.hidden-resource {
    opacity: 0.6;
    position: relative;
}

.resource-card.hidden-resource::after {
    content: 'H';
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 7px;
    font-weight: 700;
    color: #c00;
    background: #fee;
    padding: 1px 3px;
    border-radius: 2px;
    letter-spacing: 0;
    z-index: 5;
    pointer-events: none;
}

.mini-btn.ended-active {
    color: #059669 !important;
    background: #d1fae5 !important;
}

.subtimeline-item.ended-item .subtimeline-dot {
    background: #059669 !important;
    border-color: #059669 !important;
}

.subtimeline-item.ended-item .subtimeline-dot::after {
    content: '✓';
    position: absolute;
    font-size: 8px;
    color: white;
}

/* Subevent drag handle - needs different positioning due to margin-left */
.subtimeline-item.subevent .drag-handle.subevent-drag {
    left: -20px;
    font-size: 10px;
    opacity: 0.5 !important;
    width: 16px;
    height: 24px;
    cursor: grab;
}

.subtimeline-item.subevent:hover .drag-handle.subevent-drag {
    opacity: 1 !important;
}

/* Quick Day Navigation Sidebar */
.quick-day-nav {
    position: fixed;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 90;
    max-height: 70vh;
    overflow-y: auto;
    display: none;
}

.quick-day-nav.visible {
    display: block;
}

.quick-day-nav-header {
    font-size: 10px;
    font-weight: 600;
    color: var(--stone);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-bottom: 1px solid var(--pearl);
    margin-bottom: 4px;
}

.quick-day-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quick-day-btn {
    padding: 6px 12px;
    font-size: 12px;
    color: var(--slate);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: all 0.15s;
}

.quick-day-btn:hover {
    background: var(--cream);
    color: var(--ink);
}

.quick-day-btn.active {
    background: var(--gold);
    color: white;
}

.quick-day-btn .day-hebrew {
    font-family: var(--font-serif);
    font-size: 14px;
}

.expand-all-btn.visible {
    display: inline-flex;
}

.loading-small {
    font-size: 11px;
    color: var(--stone);
    text-align: center;
    padding: 4px;
}

/* Resources attached to events - same layout as unlinked resources */
.event-resources {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--pearl);
}

.resource-card.event-linked {
    border-left: 3px solid var(--gold);
}

/* Unlink button for event resources */
.resource-unlink {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.resource-unlink:hover {
    background: rgba(220,38,38,0.1);
    color: #dc2626;
}

/* Floating event picker */
.event-picker-float {
    position: sticky;
    top: 60px;
    z-index: 100;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 12px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.event-picker-label {
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.event-pick-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: white;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-pick-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: var(--gold);
}

.event-picker-close {
    margin-left: auto;
    padding: 4px 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.event-picker-close:hover {
    background: rgba(220,38,38,0.3);
    border-color: #dc2626;
}

/* Add buttons */
.add-day-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    margin: 16px 60px;
    border: 2px dashed var(--pearl);
    border-radius: 8px;
    background: none;
    color: var(--stone);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.add-day-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(139,115,85,0.05);
}

.inline-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin: 6px 0;
    border: 1px dashed var(--pearl);
    border-radius: 4px;
    background: none;
    color: var(--stone);
    font-size: 12px;
    cursor: pointer;
}

.inline-add-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Special tag pill */
.special-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.special-tag-pill:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.special-tag-pill .remove-tag {
    opacity: 0;
    margin-left: 4px;
    transition: opacity 0.2s;
}

.special-tag-pill:hover .remove-tag {
    opacity: 1;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: var(--ink);
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #059669; }
.toast.error { background: #dc2626; }

/* ===== Live presence ===== */
.presence-bar {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 900;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--pearl, #e5e1d8);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    font-size: 13px;
    max-width: 60vw;
    overflow-x: auto;
}
.presence-bar.visible { display: flex; }
.presence-bar-label { color: var(--stone, #8a8275); white-space: nowrap; }
.presence-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 3px;
    background: var(--cream, #f7f4ee);
    border-radius: 999px;
    white-space: nowrap;
}
.presence-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--gold, #b08d57);
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.day-presence:empty { display: none; }
.day-lock-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 5px 12px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}
.day-row.day-being-edited {
    outline: 2px solid #fde68a;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Live content sync highlight */
@keyframes liveUpdatePulse {
    0%   { box-shadow: 0 0 0 2px rgba(176,141,87,0.55); background: rgba(176,141,87,0.10); }
    100% { box-shadow: 0 0 0 2px rgba(176,141,87,0);    background: transparent; }
}
.live-updated {
    animation: liveUpdatePulse 2s ease-out;
    border-radius: 8px;
}

/* Hide contribute button */
.builder-mode .contribute-btn { display: none; }

/* Collapse button */
.collapse-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid var(--pearl);
    background: white;
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: all 0.2s;
}

.collapse-btn:hover {
    background: var(--ivory);
    color: var(--charcoal);
}

/* Collapse all resources bar */
.resources-collapse-bar {
    margin-bottom: 12px;
}

.collapse-all-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.collapse-all-btn:hover {
    background: linear-gradient(135deg, #2d4a6f 0%, #3d5a7f 100%);
}

.collapse-all-btn .collapse-icon {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.2s;
}

/* Resources section */
.resources-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}

.resource-type-group {
    margin-top: 6px;
}

.resource-type-group:first-child {
    margin-top: 2px;
}

.resource-type-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    padding: 2px 6px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.resource-type-label i {
    font-size: 9px;
}

.resource-card {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 5px;
    background: #f9fafb;
    border: 1px solid var(--mist);
    border-radius: 4px;
}

.resource-card:hover {
    background: #f3f4f6;
}

.resource-thumb-box {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}

.resource-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.resource-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #9ca3af;
    font-size: 10px;
    z-index: 1;
}

.resource-info {
    flex: 1;
    min-width: 0;
    line-height: 1.1;
}

.resource-title {
    font-size: 10px;
    font-weight: 500;
    color: var(--charcoal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.resource-meta {
    font-size: 9px;
    color: var(--stone);
    line-height: 1.1;
}

.resource-delete {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s;
    font-size: 8px;
}

.resource-card:hover .resource-delete {
    opacity: 1;
}

.resource-delete:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

/* Resource type badge */
.resource-type-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 10;
}

.resource-type-badge i {
    font-size: 7px;
}

/* Resource actions container */
.resource-actions {
    display: flex;
    flex-direction: row;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.resource-card:hover .resource-actions {
    opacity: 1;
}

/* Preview button */
.resource-preview {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--pearl);
    background: var(--ivory);
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 8px;
    text-decoration: none;
}

.resource-preview:hover {
    background: #dbeafe;
    color: #2563eb;
    border-color: #93c5fd;
}

.resource-unlink {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--pearl);
    background: var(--ivory);
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 8px;
}

.resource-unlink:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.resource-actions .mini-btn {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 8px;
}

/* Preview modal */
.preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
}

.preview-content {
    position: relative;
    background: white;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--pearl);
    background: var(--ivory);
}

.preview-header span {
    font-weight: 600;
    font-size: 14px;
    color: var(--charcoal);
}

.preview-header button {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--stone);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-header button:hover {
    background: #fee2e2;
    color: #dc2626;
}

.preview-body {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

/* Wider work area — the builder is a workbench, not a thin reading column. */
.builder-mode .timeline-section {
    max-width: 1240px;
    padding-left: 28px;
    padding-right: 28px;
}
@media (max-width: 1100px) {
    .builder-mode .timeline-section { padding-left: 16px; padding-right: 16px; }
}
/* When a yuman panel is open, let the work area use the full remaining width. */
body.yuman-active .timeline-section,
body.yuman-reader-active .timeline-section {
    max-width: none;
}

/* Timeline container needs right margin for the floating per-day action rail. */
.timeline-list {
    padding-right: 56px !important;
}

/* Month picker modal */
.month-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.month-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.month-picker-content {
    position: relative;
    background: var(--cream);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-width: 400px;
}
.month-picker-content h3 {
    margin: 0 0 16px;
    text-align: center;
    color: var(--charcoal);
}
.month-picker-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.month-picker-item {
    padding: 12px;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    border: 2px solid transparent;
}
.month-picker-item:hover {
    background: var(--pearl);
}
.month-picker-item.active {
    border-color: var(--gold);
    background: #fff8e7;
}

/* Year picker modal */
.year-picker-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.year-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.year-picker-content {
    position: relative;
    background: var(--cream);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-width: 500px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.year-picker-content h3 {
    margin: 0 0 16px;
    text-align: center;
    color: var(--charcoal);
}
.year-picker-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    overflow-y: auto;
    max-height: 50vh;
    padding: 4px;
}
.year-picker-item {
    padding: 10px 8px;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    border: 2px solid transparent;
    font-size: 14px;
}
.year-picker-item:hover {
    background: var(--pearl);
}
.year-picker-item.active {
    border-color: var(--gold);
    background: #fff8e7;
    font-weight: 600;
}

/* ===== Yuman Zones Panel ===== */
:root {
    --yuman-panel-width: 47vw;
    --yuman-reader-width: 40vw;
}
body.yuman-active main {
    margin-right: var(--yuman-panel-width);
    transition: margin-right 0.25s ease;
}
body.yuman-active .quick-day-nav,
body.yuman-active .expand-all-btn {
    display: none !important;
}

#yumanPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--yuman-panel-width);
    height: 100vh;
    background: #f7f5f0;
    border-left: 1px solid var(--mist, #d8d2c4);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1200;
}
body.yuman-active #yumanPanel { transform: none; }

/* ---------- Yuman Reader panel ---------- */
body.yuman-reader-active main {
    margin-right: var(--yuman-reader-width);
    transition: margin-right 0.25s ease;
}
body.yuman-reader-active .quick-day-nav,
body.yuman-reader-active .expand-all-btn {
    display: none !important;
}
#yumanReaderPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--yuman-reader-width);
    height: 100vh;
    background: #f7f5f0;
    border-left: 1px solid var(--mist, #d8d2c4);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1200;
}
body.yuman-reader-active #yumanReaderPanel { transform: none; }

.yuman-panel-resizer {
    position: absolute;
    top: 0;
    left: -6px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    z-index: 1201;
    touch-action: none;
}
.yuman-panel-resizer::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 2px;
    height: 64px;
    border-radius: 2px;
    background: rgba(139, 115, 85, 0.5);
    opacity: 0;
    transition: opacity 0.15s ease;
}
#yumanPanel:hover .yuman-panel-resizer::before,
#yumanReaderPanel:hover .yuman-panel-resizer::before,
body.yuman-resizing .yuman-panel-resizer::before {
    opacity: 1;
}
body.yuman-resizing.yuman-active main,
body.yuman-resizing.yuman-reader-active main,
body.yuman-resizing #yumanPanel,
body.yuman-resizing #yumanReaderPanel {
    transition: none !important;
}
.yr-toggle {
    display: inline-flex;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 6px;
    overflow: hidden;
}
.yr-toggle button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}
.yr-toggle button.active { background: #f59e0b; color: #1e3a5f; }
/* Reader: per-yuman tab strip (which yuman's zones are shown / default source) */
.yr-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 8px 10px 0;
    background: #e7e3d9;
    border-bottom: 1px solid var(--mist, #d8d2c4);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}
.yr-tabs:empty { display: none; }
.yr-tab {
    background: #f3f0e8;
    border: 1px solid #d8d2c4;
    border-bottom: none;
    border-radius: 7px 7px 0 0;
    color: #5d564a;
    padding: 7px 12px 8px;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: inherit;
    position: relative;
    top: 1px;
}
.yr-tab:hover { background: #fbf9f4; }
.yr-tab.active {
    background: #efece4;
    color: #1e3a5f;
    font-weight: 700;
    border-color: var(--mist, #d8d2c4);
    border-bottom: 1px solid #efece4;
}
.yr-tab .yr-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
.yr-tab .yr-tab-count { opacity: 0.6; font-size: 11px; }
.yr-tab.all-tab .yr-dot {
    background: conic-gradient(#1e3a5f, #f59e0b, #2e7d32, #b8860b, #1e3a5f);
}
#yumanReaderBody {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: #efece4;
}
.yr-empty {
    text-align: center;
    color: var(--stone, #6b6456);
    padding: 48px 16px;
    font-size: 14px;
}
.yr-zone-card {
    background: #fff;
    border: 1px solid var(--mist, #e0dacb);
    border-left: 4px solid var(--yz-color, #c9c2b2);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: box-shadow 0.12s, transform 0.12s;
}
.yr-zone-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.yr-zone-card.active {
    box-shadow: 0 0 0 2px var(--yz-color, #f59e0b), 0 3px 12px rgba(0,0,0,0.16);
}
.yr-zone-card.active .yr-zone-active-flag { display: inline-flex; }
.yr-zone-active-flag {
    display: none; align-items: center; gap: 4px;
    background: var(--yz-color, #f59e0b); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.yr-zone-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mist, #eee7d8);
    font-size: 12px;
}
.yr-zone-index {
    background: #1e3a5f;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}
.yr-zone-label { font-weight: 600; color: #1e3a5f; }
.yr-zone-source {
    color: #fff; margin-left: auto; font-size: 11px; font-weight: 600;
    background: var(--yz-color, #8a8270); padding: 2px 8px; border-radius: 10px;
    display: inline-flex; align-items: center; gap: 5px;
}
.yr-crop {
    width: 100%;
    background-repeat: no-repeat;
    background-color: #5a5650;
}
.yr-zone-note {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--charcoal, #3a362e);
    white-space: pre-wrap;
    background: #fffdf7;
    border-top: 1px solid var(--mist, #f0e9da);
}
.yr-page-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.yr-page-head {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #1e3a5f;
    background: #fff;
    border-bottom: 1px solid var(--mist, #eee7d8);
    border-left: 4px solid var(--yz-color, #c9c2b2);
    display: flex; align-items: center; gap: 7px;
}
.yr-page-head .yr-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.12) inset;
}
.yr-page-stage { position: relative; line-height: 0; }
.yr-page-stage img { display: block; width: 100%; }
.yr-hl {
    position: absolute;
    border: 2px solid #f59e0b;
    background: rgba(245,158,11,0.18);
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;
}
.yr-hl:hover { background: rgba(245,158,11,0.32); }
.yr-hl.active {
    border-color: #1e3a5f;
    background: rgba(30,58,95,0.26);
    box-shadow: 0 0 0 2px rgba(30,58,95,0.4);
}
.yr-hl-num {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #1e3a5f;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.yuman-panel-header {
    background: #1e3a5f;
    color: #fff;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.yuman-panel-header .yp-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.yuman-panel-header .yp-spacer { flex: 1; }
.yp-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.yp-btn:hover { background: rgba(255,255,255,0.22); }
.yp-btn.primary { background: #f59e0b; border-color: #f59e0b; color: #1e3a5f; font-weight: 600; }
.yp-btn.primary:hover { background: #fbbf24; }
.yp-btn.danger:hover { background: #dc2626; border-color: #dc2626; }
.yp-btn:disabled { opacity: 0.35; cursor: default; }
.yp-btn:disabled:hover { background: rgba(255,255,255,0.12); }

/* Tabs to switch between the month's yumanim in the viewer */
.yuman-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    background: #16304f;
    padding: 0 8px;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}
.yuman-tabs:empty { display: none; }
.yuman-tab {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: rgba(255,255,255,0.65);
    padding: 9px 14px;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.yuman-tab:hover { color: #fff; background: rgba(255,255,255,0.06); }
.yuman-tab.active {
    color: #fff;
    border-bottom-color: #f59e0b;
    font-weight: 600;
}
.yuman-tab .yt-pages { opacity: 0.6; font-size: 11px; }
.yuman-tab .yt-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}

.yuman-toolbar {
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--mist, #e5e0d4);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.yuman-toolbar select {
    padding: 5px 8px;
    border: 1px solid var(--mist, #d8d2c4);
    border-radius: 5px;
    font-size: 13px;
    max-width: 200px;
}
.yuman-target-pill {
    background: #fff8e7;
    border: 1px solid #f59e0b;
    color: #92651a;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.yuman-page-indicator {
    font-size: 12px;
    color: var(--stone, #6b6456);
    min-width: 70px;
    text-align: center;
}
.yuman-tb-btn {
    background: #fff;
    border: 1px solid var(--mist, #d8d2c4);
    border-radius: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: var(--stone, #555);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.yuman-tb-btn:hover { background: var(--cream, #f3efe6); color: var(--gold, #b8860b); }
.yuman-tb-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.yuman-viewport {
    flex: 1;
    overflow: auto;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #5a5650;
}
.yuman-stage {
    position: relative;
    display: inline-block;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    line-height: 0;
    flex: 0 0 auto;
}
.yuman-stage img {
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
.yuman-overlay {
    position: absolute;
    inset: 0;
    cursor: crosshair;
}
.yuman-region {
    position: absolute;
    box-sizing: border-box;
    pointer-events: auto;
}
.yuman-region.current {
    border: 2px solid #f59e0b;
    background: rgba(245,158,11,0.18);
}
.yuman-region.other {
    border: 1px dashed rgba(255,255,255,0.7);
    background: rgba(30,58,95,0.32);
}
.yuman-region.selected {
    outline: 2px solid #2563eb;
    outline-offset: 1px;
}
.yuman-region.selected { cursor: move; }
.yuman-resize-handle {
    position: absolute;
    width: 11px;
    height: 11px;
    background: #2563eb;
    border: 1.5px solid #fff;
    border-radius: 2px;
    box-sizing: border-box;
    display: none;
    z-index: 3;
}
.yuman-region.selected .yuman-resize-handle { display: block; }
.yuman-resize-handle[data-h="nw"] { left: -6px;  top: -6px;  cursor: nwse-resize; }
.yuman-resize-handle[data-h="ne"] { right: -6px; top: -6px;  cursor: nesw-resize; }
.yuman-resize-handle[data-h="sw"] { left: -6px;  bottom: -6px; cursor: nesw-resize; }
.yuman-resize-handle[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.yuman-resize-handle[data-h="n"]  { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
.yuman-resize-handle[data-h="s"]  { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
.yuman-resize-handle[data-h="w"]  { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
.yuman-resize-handle[data-h="e"]  { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }
.yuman-region-label {
    position: absolute;
    top: -9px;
    left: 4px;
    background: #1e3a5f;
    color: #fff;
    font-size: 10px;
    line-height: 1.4;
    padding: 0 5px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
}
.yuman-region.current .yuman-region-label { background: #f59e0b; color: #1e3a5f; }
.yuman-region-del {
    position: absolute;
    top: -24px;
    right: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-size: 11px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.yuman-region.selected .yuman-region-del { display: flex; }
.yuman-drawbox {
    position: absolute;
    border: 2px dashed #f59e0b;
    background: rgba(245,158,11,0.15);
    pointer-events: none;
}

.yuman-empty {
    color: #e8e4dc;
    text-align: center;
    padding: 40px 20px;
    font-size: 14px;
    line-height: 1.6;
    margin: auto;
}
.yuman-empty i { font-size: 36px; opacity: 0.5; display: block; margin-bottom: 12px; }

.yuman-attach {
    padding: 18px;
    overflow: auto;
}
.yuman-attach h3 { margin: 0 0 14px; color: #1e3a5f; font-size: 16px; }
.yuman-attach label { display: block; font-size: 12px; font-weight: 600; color: #555; margin: 12px 0 4px; }
.yuman-attach input[type=text],
.yuman-attach input[type=url] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mist, #d8d2c4);
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.yuman-attach .or-sep {
    text-align: center;
    color: #999;
    font-size: 11px;
    margin: 16px 0 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.yuman-drop {
    border: 2px dashed var(--mist, #cbc4b4);
    border-radius: 8px;
    padding: 22px;
    text-align: center;
    color: #777;
    cursor: pointer;
    background: #fff;
}
.yuman-drop:hover { border-color: #f59e0b; color: #92651a; }
.yuman-progress {
    margin-top: 14px;
    font-size: 12px;
    color: #1e3a5f;
}
.yuman-progress .bar {
    height: 6px;
    background: #e5e0d4;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 6px;
}
.yuman-progress .bar span {
    display: block;
    height: 100%;
    background: #f59e0b;
    width: 0;
    transition: width 0.2s;
}
.yuman-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--mist, #e5e0d4);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}
.yuman-list-item .yli-meta { flex: 1; }
.yuman-list-item .yli-meta small { color: #999; }

/* ============================================================
   Event "building block" cards (revamped timeline editor)
   ============================================================ */
/* When the list holds cards, drop the absolute timeline spine. */
.subtimeline-list.cards {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.subtimeline-list.cards .event-card {
    display: block;
    padding: 0;
    margin: 0 0 18px 0;
    background: #fff;
    border: 1px solid var(--pearl, #d8d2c4);
    border-left: 4px solid var(--gold, #b08d57);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
    overflow: visible;
}
.subtimeline-list.cards .event-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.subtimeline-list.cards .event-card.night {
    border-left-color: var(--slate, #5b6470);
    background: #fbfbfd;
}
.subtimeline-list.cards .event-card.ended-item { border-left-style: double; }
.subtimeline-list.cards .event-card.hidden-item {
    opacity: 0.78;
    background: repeating-linear-gradient(-45deg, #fff, #fff 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 20px);
}
/* Modern drag feedback: the card lifts and fades while it floats to a new slot. */
.subtimeline-list.cards .event-card.dragging {
    opacity: 0.55;
    transform: scale(0.99);
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    cursor: grabbing;
}
.subtimeline-list.cards .event-card.drop-target {
    box-shadow: 0 0 0 2px var(--gold);
    background: rgba(176,141,87,0.08);
}

/* Card header */
.ec-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mist, #eee7d8);
}
.event-card.collapsed .ec-head { border-bottom: none; }
.ec-grip {
    cursor: grab;
    color: #c4bdab;
    width: 18px; text-align: center;
    flex-shrink: 0;
}
.ec-grip:hover { color: var(--gold); }
.event-card.dragging .ec-grip { cursor: grabbing; }
.ec-collapse {
    background: none; border: none; cursor: pointer;
    color: var(--stone, #6b6456); width: 24px; height: 24px;
    border-radius: 5px; flex-shrink: 0; font-size: 12px;
}
.ec-collapse:hover { background: var(--cream, #f3eee2); color: var(--gold); }
.ec-collapse i { transition: transform 0.15s; }
.event-card.collapsed .ec-collapse i { transform: rotate(-90deg); }
.ec-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.ec-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border: 1px solid var(--mist, #e2dac9);
    border-radius: 7px;
    background: #f8f5ed;
    padding: 2px 7px;
}
.ec-inline-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a816e;
    white-space: nowrap;
}
.ec-inline-field.time { flex: 0 0 auto; }
.ec-inline-field.name { min-width: 120px; max-width: 100%; flex: 1; }
.ec-inline-value {
    display: inline-block;
    min-height: 1.2em;
    border-radius: 5px;
    padding: 2px 4px;
    line-height: 1.25;
}
.ec-inline-value:focus { outline: none; background: #fff; }
.ec-time {
    font-weight: 700; color: var(--gold, #b08d57);
    font-size: 0.82rem; min-width: 52px;
    white-space: nowrap;
}
.ec-time:empty::before { content: '+ time'; color: #c4bdab; font-weight: 500; }
.ec-time:focus { outline: none; background: #fff; }
.ec-title {
    color: var(--ink, #2a2a2a);
    font-size: 0.93rem;
    min-width: 120px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-title:empty::before { content: '+ event name'; color: #c4bdab; font-weight: 500; }
.ec-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    flex-wrap: wrap; justify-content: flex-end;
}

/* Card body */
.ec-body { padding: 14px 16px 16px; }
.event-card.collapsed .ec-body { display: none; }
.ec-desc {
    font-size: 0.95rem; color: var(--ink, #2a2a2a);
    line-height: 1.5; min-height: 1.2em;
    padding: 4px 6px; border-radius: 5px;
}
.ec-desc:empty::before { content: 'Click to add description…'; color: #c4bdab; }
.ec-desc:focus { outline: none; background: var(--cream, #f3eee2); }
.ec-tagrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* Labeled action buttons — every button says what it does. */
.ec-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 11px;
    border: 1px solid var(--pearl, #d8d2c4); border-radius: 7px;
    background: #fff; color: var(--stone, #6b6456);
    font-size: 12.5px; font-family: inherit; cursor: pointer;
    white-space: nowrap; line-height: 1;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ec-btn i { font-size: 11px; }
.ec-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--cream, #f3eee2); }
.ec-btn.active { border-color: var(--gold); color: #fff; background: var(--gold, #b08d57); }
.ec-btn.danger:hover { border-color: #fecaca; color: #dc2626; background: #fee2e2; }
.ec-btn.sm { height: 26px; padding: 0 9px; font-size: 11.5px; }

/* Add-bar at bottom of a card body */
.ec-addbar {
    display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; flex-wrap: wrap;
    border-top: 1px solid var(--mist, #eee7d8);
}
.ec-addbar .ec-spacer { flex: 1; }
.ec-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--cream, #f3eee2); border: 1px dashed var(--pearl, #d8d2c4);
    color: var(--stone, #6b6456); border-radius: 7px;
    padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ec-add-btn:hover { border-color: var(--gold); color: var(--gold); background: #fff; }

/* End-time inline row inside card */
.ec-endrow {
    display: flex; align-items: center; gap: 10px;
    margin-top: 12px; padding-top: 12px;
    border-top: 1px dashed var(--mist, #eee7d8);
    font-size: 0.8rem; color: var(--stone, #6b6456);
}

/* Day sorter modal: compact rows for fast reordering */
.sorter-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 12, 0.55);
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sorter-modal {
    width: min(680px, 96vw);
    max-height: 88vh;
    background: #f6f2e9;
    border: 1px solid #dbd3c3;
    border-radius: 10px;
    box-shadow: 0 24px 50px rgba(0,0,0,0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sorter-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #1e3a5f;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.sorter-head .sorter-title { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.sorter-head .sorter-spacer { flex: 1; }
.sorter-close {
    border: none;
    background: rgba(255,255,255,0.16);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
}
.sorter-close:hover { background: rgba(255,255,255,0.28); }
.sorter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e4ddcf;
    background: #f1ece1;
    flex-wrap: wrap;
}
.sorter-mode {
    border: 1px solid #d8d0bf;
    background: #fff;
    color: #544d41;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
}
.sorter-mode.active {
    background: #f59e0b;
    color: #1e3a5f;
    border-color: #f59e0b;
}
.sorter-event-select {
    border: 1px solid #d8d0bf;
    background: #fff;
    color: #39342c;
    border-radius: 6px;
    font-size: 12px;
    padding: 6px 8px;
    min-width: 220px;
    max-width: 100%;
}
.sorter-list {
    overflow: auto;
    padding: 10px 12px;
    min-height: 140px;
    max-height: 62vh;
    background: #f6f2e9;
}
.sorter-empty {
    color: #786f5f;
    font-size: 12.5px;
    padding: 12px;
    border: 1px dashed #d8d0bf;
    border-radius: 8px;
    background: #fbf8f2;
}
.sorter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #e4ddcf;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    color: #3d372d;
    margin-bottom: 6px;
    cursor: grab;
    user-select: none;
}
.sorter-row.dragging {
    opacity: 0.55;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
    cursor: grabbing;
}
.sorter-grip {
    color: #b3a997;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.sorter-row-time {
    color: #9c7a47;
    font-weight: 700;
    min-width: 40px;
    flex-shrink: 0;
    white-space: nowrap;
}
.sorter-row-desc {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sorter-row-id {
    color: #9a927f;
    font-size: 10.5px;
    flex-shrink: 0;
}
.sorter-foot {
    padding: 8px 12px;
    border-top: 1px solid #e4ddcf;
    font-size: 11.5px;
    color: #6e6556;
    background: #f3efe5;
}
.ec-endrow .ec-end-label { font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; }
.ec-end-time {
    font-weight: 600; color: var(--gold); min-width: 54px;
    padding: 2px 6px; border-radius: 5px;
}
.ec-end-time:empty::before { content: 'time'; color: #c4bdab; font-weight: 400; }
.ec-end-time:focus { outline: none; background: var(--cream, #f3eee2); }

/* ---------- Subevent nested blocks ---------- */
.ec-subevents { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ec-subevents:empty { margin-top: 0; }
.subevent-card {
    display: flex; align-items: flex-start; gap: 10px;
    background: #faf8f3; border: 1px solid var(--mist, #ece5d6);
    border-left: 3px solid var(--stone, #b8b09c);
    border-radius: 8px; padding: 9px 11px;
    position: relative;
    transition: box-shadow 0.12s, transform 0.12s;
}
.subevent-card.hidden-item { opacity: 0.75; }
.subevent-card.dragging {
    opacity: 0.55; transform: scale(0.99);
    box-shadow: 0 8px 20px rgba(0,0,0,0.16); cursor: grabbing;
}
.sec-grip { cursor: grab; color: #c8c1af; padding-top: 2px; flex-shrink: 0; font-size: 11px; }
.sec-grip:hover { color: var(--gold); }
.sec-time {
    font-size: 0.72rem; font-weight: 600; color: var(--stone, #6b6456);
    min-width: 50px; padding: 3px 4px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.sec-time:empty::before { content: '+ time'; color: #c4bdab; font-weight: 400; }
.sec-time:focus { outline: none; background: #fff; }
.sec-body { flex: 1; min-width: 0; }
.sec-desc { font-size: 0.85rem; color: var(--slate, #4a4a4a); line-height: 1.45; padding: 2px 4px; border-radius: 4px; }
.sec-desc:empty::before { content: 'Sub-event…'; color: #c4bdab; }
.sec-desc:focus { outline: none; background: #fff; }
.sec-actions { display: flex; gap: 5px; flex-shrink: 0; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 230px; }

/* ---------- Notes ---------- */
.ec-notes { margin-top: 12px; }
.ec-notes:empty { margin-top: 0; }
.ec-notes-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--stone, #8a8270); font-weight: 700; margin-bottom: 6px;
}
.ec-notes-head i { color: var(--gold); }
.note-row {
    display: flex; align-items: flex-start; gap: 8px;
    background: #fffdf6; border: 1px solid #efe7d2;
    border-radius: 7px; padding: 7px 10px; margin-bottom: 6px;
}
.note-bullet { color: var(--gold); font-size: 7px; padding-top: 7px; flex-shrink: 0; }
.note-body {
    flex: 1; min-width: 0; font-size: 0.85rem; line-height: 1.5;
    color: var(--ink, #2a2a2a); padding: 2px 3px; border-radius: 4px; white-space: pre-wrap;
}
.note-body:empty::before { content: 'Write a note…'; color: #c4bdab; }
.note-body:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(176,141,87,0.25); }
.note-del {
    background: none; border: none; color: #cbb9a0; cursor: pointer;
    font-size: 11px; padding: 3px 5px; flex-shrink: 0; border-radius: 4px;
}
.note-del:hover { color: #dc2626; background: #fee2e2; }
.note-row .source-select { flex-shrink: 0; align-self: center; max-width: 140px; }
.subevent-card .ec-notes { margin-top: 8px; }