/* Scoped timeline styles (no global selectors) */
.lr-timeline { --bg: #0f1115; --panel: #151922; --text: #e6ebf5; --muted: #a7b0c0; --lane-gap: 8px; --radius: 14px; --bar-stroke: rgba(255,255,255,0.06); --bar-hi: rgba(255,255,255,0.08); --tick: rgba(255,255,255,0.06); --today: #b1c6ff; --shadow-ambient: 0 2px 6px rgba(0,0,0,0.35); --shadow-key: 0 10px 24px rgba(0,0,0,0.35); }
html[data-theme="light"] .lr-timeline { --bg:#F8F9FA; --panel:#ffffff; --text:#2E2E2E; --muted:#6b7280; --bar-stroke: rgba(0,0,0,0.10); --bar-hi: rgba(255,255,255,0.75); --tick:#e4e6eb; --today:#6d86f5; --shadow-ambient:0 2px 6px rgba(0,0,0,0.06); --shadow-key:0 12px 24px rgba(0,0,0,0.08); }

.lr-timeline .timeline-card { padding: 0 6px; box-shadow: var(--component-shadow); border: 1px solid var(--color-border-subtle); border-radius: 12px; background: var(--panel); }
.lr-timeline .timeline-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
/* Hide toolbar arrows and label per design for embedded card */
.lr-timeline .timeline-toolbar { display: none; }
.lr-timeline .timeline-toolbar button { background: linear-gradient(180deg,#1f2736,#1a2030); color: var(--text); border:1px solid #2a3244; padding:6px 8px; border-radius:999px; box-shadow: var(--shadow-ambient); cursor:pointer; }
html[data-theme="light"] .lr-timeline .timeline-toolbar button { background: linear-gradient(180deg,#ffffff,#f3f5fb); border:1px solid #e0e4ee; color:#2E2E2E; box-shadow:0 2px 6px rgba(0,0,0,0.06); }
.lr-timeline .window-label { color: var(--muted); font-size:12px; flex:1; text-align:center; }

.lr-timeline .timeline-scroll { position:relative; height:36px; background: linear-gradient(180deg,#171c27,#131823); border:1px solid #202634; border-radius: var(--radius); overflow:hidden; box-shadow: var(--component-shadow); }
html[data-theme="light"] .lr-timeline .timeline-scroll { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,249,250,0.96)); border:1px solid #e4e6eb; box-shadow: var(--component-shadow); }
.lr-timeline .timeline-svg { width:100%; height:100%; display:block; }
.lr-timeline .timeline-axis { position:absolute; left:0; right:0; bottom:0; height:20px; color:var(--muted); font-size:10px; display:flex; justify-content:space-between; padding:0 8px 4px; opacity:0; pointer-events:none; }

.lr-timeline .pill-label { font-size:11px; font-weight:600; letter-spacing:0.15px; fill: var(--text); paint-order: stroke; stroke: rgba(0,0,0,0.18); stroke-width:1.2; }
html[data-theme="light"] .lr-timeline .pill-label { stroke: rgba(255,255,255,0.6); stroke-width:0.8; }

.lr-timeline .bar-group { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45)) drop-shadow(0 6px 14px rgba(0,0,0,0.25)) saturate(0.9) brightness(0.95); }
.lr-timeline .bar-group rect { stroke: var(--bar-stroke); stroke-width:1; fill-opacity:0.95; }
html[data-theme="light"] .lr-timeline .bar-group { filter: drop-shadow(0 1px 2px rgba(20,24,33,0.08)) drop-shadow(0 8px 18px rgba(20,24,33,0.08)); }

/* Category palettes (scoped) */
.lr-timeline .cat-music      { --bar:#6aaecb; }
.lr-timeline .cat-film-theater{ --bar:#806fcb; }
.lr-timeline .cat-food       { --bar:#78c69a; }
.lr-timeline .cat-gathering  { --bar:#e9bf64; }
.lr-timeline .cat-sport      { --bar:#5bbdac; }
.lr-timeline .cat-rest       { --bar:#b87979; }
html[data-theme="light"] .lr-timeline .cat-music       { --bar:#9bc9e2; }
html[data-theme="light"] .lr-timeline .cat-film-theater{ --bar:#b6a7e8; }
html[data-theme="light"] .lr-timeline .cat-food        { --bar:#9cd6b8; }
html[data-theme="light"] .lr-timeline .cat-gathering   { --bar:#f0cf83; }
html[data-theme="light"] .lr-timeline .cat-sport       { --bar:#a8dfd3; }
html[data-theme="light"] .lr-timeline .cat-rest        { --bar:#e7aaaa; }

/* Ensure the timeline spans full grid width in the landing page layout */
.lr-timeline { grid-area: timeline; grid-column: 1 / -1; width: 100%; margin: 0; }

/* Overlay banner label, left-aligned with a subtle white gradient fade */
.lr-timeline .timeline-banner { position: relative; margin: 0; }
.lr-timeline .timeline-banner__bg { position:absolute; left:0; right:0; top:0; height: 52px; pointer-events:none; z-index:2; background: linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.90) 35%, rgba(255,255,255,0.00) 72%); }
/* Keep the same white fade in dark mode per design spec */
html[data-theme="dark"] .lr-timeline .timeline-banner__bg { background: linear-gradient(90deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0.00) 72%); }
.lr-timeline .timeline-banner__title { position: relative; z-index:3; margin:0; padding: 10px 12px; font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: 0.015em; text-transform: none; text-shadow: none; }