:root{
  --bg:#0f1115; --fg:#e6e6e6; --muted:#98a2b3; --accent:#5b8def; --line:#1f2937; --card:#141825; --chip:#202940;
  --fade-duration:240ms; --slide-duration:260ms; --shadow:0 6px 18px rgba(0,0,0,.35);
  --timeline-gap: 48px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif}

.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#0c0e13cc;backdrop-filter:blur(8px);border-bottom:1px solid #111726}
.breadcrumbs{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:600}
.breadcrumbs .sep{opacity:.5}
.zoom-controls{display:flex;align-items:center;gap:10px}
.zoom-controls .divider{width:1px;height:24px;background:var(--line);margin:0 4px}
.interaction-hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;user-select:none;transition: color 0.2s}
.interaction-hint.active{color: var(--accent)}
.interaction-hint.active .key{border-color: var(--accent); color: var(--accent)}
.interaction-hint .key{background:var(--chip);padding:2px 6px;border-radius:4px;border:1px solid #2a3654;color:var(--fg);font-family:monospace}
.interaction-hint .mouse{font-weight:600}
.zoom-controls button{width:34px;height:34px;border-radius:8px;border:1px solid #1f2433;background:#0e1424;color:var(--fg);cursor:pointer}
.zoom-controls button:active{transform:scale(.98)}
#zoomLevelLabel{min-width:60px;text-align:center;color:var(--muted)}

.app-main{display:grid;grid-template-columns:1fr 0px; /* drawer closed */ grid-template-areas:'timeline drawer';}
.app-main.drawer-open{grid-template-columns:1fr 360px}
.timeline-shell{grid-area:timeline;min-height:calc(100vh - 56px);display:flex;position:relative;background:var(--bg);border-right:1px solid var(--line);max-width: 100%;}

.resizer-handle{
  position:absolute;
  bottom:4px;
  right:4px;
  width:12px;
  height:12px;
  cursor:nwse-resize;
  z-index:25;
  background: linear-gradient(135deg, transparent 50%, var(--muted) 50%, var(--muted) 60%, transparent 60%, transparent 70%, var(--muted) 70%);
  opacity: 0.5;
  transition: opacity 0.2s;
}
.resizer-handle:hover{
  opacity: 1;
}

.timeline-canvas{position:relative;flex:1;overflow:auto;padding:32px 24px;cursor: grab;}
.timeline-canvas:active{cursor: grabbing;}
.timeline-layer{position:relative;min-width:1200px}
.fade-in{animation:fadeIn var(--fade-duration) ease forwards}
.fade-out{animation:fadeOut var(--fade-duration) ease forwards}
@keyframes fadeIn{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:scale(1)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}

/* Timeline visuals */
.lane{position:relative;margin:40px 0}
.lane .hline{height:2px;background:linear-gradient(90deg,var(--line),#2a3448,var(--line));position:relative}
.lane .nodes{position:relative;display:flex;gap:var(--timeline-gap);align-items:flex-start;margin-top:-9px;padding:0 12px}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}
.dot{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #9bb7ff, #4169e1);box-shadow:0 0 0 2px #0f1322, 0 0 0 4px #24314f}
.node-goal .dot{background:radial-gradient(circle at 30% 30%, #ffdf9b, #e1a141);box-shadow:0 0 0 2px #0f1322, 0 0 0 4px #4f3d24}
.node-milestone .dot{background:radial-gradient(circle at 30% 30%, #9bffb3, #41e169);box-shadow:0 0 0 2px #0f1322, 0 0 0 4px #244f2d}
.card{width:180px;background:var(--card);border:1px solid #223055;border-radius:12px;box-shadow:var(--shadow);padding:10px 12px}
.node-goal .card{border-color: #554a22}
.node-milestone .card{border-color: #22552a}
.card h4{margin:0 0 4px 0;font-size:12px;color:#a9b4c7;text-transform:uppercase;letter-spacing:.08em}
.card .title{font-size:14px;font-weight:600}
.meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11px;padding:4px 6px;border-radius:8px;background:var(--chip);color:#c5d0e6;border:1px solid #2a3654}

/* Drawer */
.details-drawer{grid-area:drawer;position:sticky;top:56px;height:calc(100vh - 56px);background:#0d1220;border-left:1px solid #162138;transform:translateX(100%);transition:transform var(--slide-duration) ease;overflow:auto}
.app-main.drawer-open .details-drawer{transform:translateX(0)}
.drawer-content{padding:16px}
.close-btn{position:sticky;top:0;margin:8px;float:right;border:0;background:#1a2440;color:#cbd5e1;border-radius:8px;width:32px;height:32px}

/* Focus styles */
.node button, .card{outline:none}
.node [data-action]{cursor:pointer}
.node [data-action]:focus-visible{box-shadow:0 0 0 3px #2b62ff88}

/* Helper */
.muted{color:var(--muted)}