:root {
  --bg: #0b0f16;
  --panel: #101826;
  --card: #0f1724;
  --text: #e8eef8;
  --muted: #a8b3c7;
  --line: #223149;
  --chip: #162235;
  --chipLine: #2a3a57;
  --accent: #6aa7ff;
  --accent2: #9b7bff;
  --good: #39d98a;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(106,167,255,.18), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(155,123,255,.16), transparent 55%), var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 800px; margin: 0 auto; padding: 22px; }
main.container { padding-top: 130px; }

/* Fixed Header */
.top {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background-color: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 0;
}
.top-inner { display: flex; align-items: center; justify-content: space-between; max-width: 800px; margin: 0 auto; padding: 0 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.avatar { 
  width: 42px; height: 42px; border-radius: 12px; font-weight: 800; color: #000;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
}
.nav { display: flex; gap: 10px; }
.nav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--text); }

/* Work History Vertical Stack */
.timeline { display: flex !important; flex-direction: column !important; gap: 24px !important; width: 100%; }
.tl-item { display: flex !important; flex-direction: row !important; gap: 15px; width: 100%; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: 8px; flex-shrink: 0; }
.tl-content { 
  flex: 1; background: rgba(16, 24, 38, 0.55); border: 1px solid var(--line); border-radius: 16px; padding: 16px; 
}
.tl-role { font-weight: 800; font-size: 16px; margin-bottom: 4px; color: var(--text); }
.tl-meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; }

/* Tooltips */
.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: help;
  outline: none;
}

.tooltip-content {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px); /* positions ABOVE the job title */
  
  min-width: 260px;
  max-width: 360px;

  padding: 12px 14px;
  border-radius: 10px;

  background: #f8f6f1;             /* solid off-white */
  border: 1px solid #c9c3b8;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);

  color: #1a1a1a;                  /* dark readable text */
  font-size: 14px;
  line-height: 1.5;

  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;

  z-index: 9999;
  pointer-events: none;
}

/* Arrow pointing DOWN toward the job title */
.tooltip-content::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 100%;
  border: 8px solid transparent;
  border-top-color: #f8f6f1;
}

/* THIS is the line that makes the tooltip actually appear on hover */
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger:focus-within .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Prevent parent containers from clipping the tooltip */
.tl-content,
.tl-top,
.tl-role,
.timeline,
.card {
  overflow: visible;
}