/* Career timeline in the About section: roles placed to scale on a year axis, employer
   runs bracketed above, milestones as icons over the line, details in one shared tooltip.
   Colors derive from the section's tokens so the same rules read on the dark expressive
   panel and the light simple one. */
.about-section { --c-bg:#151515;--c-ink:#fff;--c-accent:var(--yellow); }
[data-mode=simple] .about-section { --c-bg:var(--s-surface);--c-ink:var(--s-ink);--c-accent:var(--s-ink); }
[data-theme=dark] .about-section,[data-theme=dark][data-mode=simple] .about-section { --c-bg:#1c1d19;--c-ink:#f3f3ed;--c-accent:var(--yellow); }
.career { --c-line:color-mix(in srgb,currentColor 20%,transparent);--c-line-strong:color-mix(in srgb,currentColor 40%,transparent);--c-muted:color-mix(in srgb,currentColor 64%,transparent);--c-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;z-index:2;border-top:1px solid var(--c-line);padding:30px 0 48px; }
.career-label { display:block;font-size:11px;color:var(--c-muted); }

/* Everything on the rail is positioned from --t, its date as a fraction of the axis. */
.career-rail { --line-y:60px;position:relative;height:calc(var(--line-y) + 40px);margin-top:22px; }

/* Employer run: a bracket from the first role's start to the run's end (or now). */
.career-group { position:absolute;top:0;left:calc(var(--t0) * 100%);right:calc((1 - var(--t1)) * 100%);height:calc(var(--line-y) - 14px);padding-bottom:8px;border-bottom:1px solid var(--c-line-strong);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;white-space:nowrap; }
.career-group:before,.career-group:after { content:'';position:absolute;bottom:-6px;width:1px;height:6px;background:var(--c-line-strong); }
.career-group:before { left:0; }.career-group:after { right:0; }
.career-mark { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:550;letter-spacing:-.01em; }
.career-mark svg { width:14px;height:14px; }
.career-group .mono { font-size:11px;color:var(--c-muted); }

.career-track { position:absolute;left:0;right:0;top:var(--line-y);height:1px;background:var(--c-line);pointer-events:none; }
.career-track i { position:absolute;inset:-.5px 0 auto;height:2px;background:var(--c-accent);transform:scaleX(var(--progress,1));transform-origin:left;transition:transform 480ms var(--c-ease); }

/* Year axis: a notch on the line for every year; only even years carry a label. */
.career-ticks { position:absolute;left:0;right:0;top:calc(var(--line-y) + 12px);font-size:11px;color:var(--c-muted);font-variant-numeric:tabular-nums;pointer-events:none; }
.career-tick { position:absolute;left:calc(var(--t) * 100%);translate:-50% 0;white-space:nowrap; }
.career-tick:before { content:'';position:absolute;left:50%;top:-12px;width:1px;height:5px;background:var(--c-line-strong); }

/* Each role is a button centered on its date; JS may nudge --x so close dates don't collide. */
.career-dot { position:absolute;top:calc(var(--line-y) - 16px);left:var(--x,calc(var(--t) * 100%));width:24px;height:32px;margin-left:-12px;display:grid;place-items:center;padding:0;background:none;border:0;color:inherit;z-index:1; }
.career-pip { width:10px;height:10px;border-radius:50%;background:var(--c-bg);border:1.5px solid var(--c-line-strong);
  transition:transform 220ms var(--c-ease),background-color 180ms,border-color 180ms,box-shadow 320ms var(--c-ease); }
/* Roles up to the one being read fill in, so the rail reads as a path. */
.career-dot.is-passed .career-pip { background:var(--c-accent);border-color:var(--c-accent); }
.career-dot.is-now .career-pip { width:14px;height:14px;background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 5px color-mix(in srgb,var(--yellow) 26%,transparent); }
.career-dot.is-active .career-pip { transform:scale(1.5);background:var(--c-ink);border-color:var(--c-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-ink) 12%,transparent); }
.career-dot.is-now.is-active .career-pip { transform:scale(1.25);background:var(--yellow);border-color:var(--yellow);box-shadow:0 0 0 7px color-mix(in srgb,var(--yellow) 30%,transparent); }
.career-dot:focus-visible,[data-mode=simple] .career-dot:focus-visible { outline:none; }
.career-dot:focus-visible :is(.career-pip,.career-badge) { outline:2px solid var(--c-ink);outline-offset:4px; }

/* Milestones sit above the line on a short stem. When a role starts the same month, one
   stop holds both: the button runs from the icon down to the dot on the line. */
.career-dot:is(.is-milestone,.has-milestone) { top:calc(var(--line-y) - 44px);width:32px;height:44px;margin-left:-16px;place-items:start center;z-index:2; }
.career-dot.has-milestone { height:60px; }
.career-dot.has-milestone .career-pip { position:absolute;top:39px;left:50%;margin-left:-5px; }
.career-dot:is(.is-milestone,.has-milestone):after { content:'';position:absolute;left:50%;top:30px;width:1px;height:14px;background:var(--c-line-strong);transition:background-color 180ms; }
.career-badge { width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--c-bg);border:1px solid var(--c-line-strong);color:var(--c-muted);
  transition:transform 220ms var(--c-ease),background-color 180ms,border-color 180ms,color 180ms; }
.career-badge svg { width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; }
.career-dot.is-passed .career-badge { border-color:var(--c-accent);color:inherit; }
.career-dot.is-passed:after { background:var(--c-accent); }
.career-dot.is-active .career-badge { transform:translateY(-3px);background:var(--c-ink);border-color:var(--c-ink);color:var(--c-bg); }

/* One tooltip glides between dots; JS fills it from the stop's template and sets its x
   position and the caret. A shared stop stacks its entries. */
.career-tip { position:absolute;top:calc(100% + 8px);left:0;width:min(320px,100%);z-index:5;padding:16px 18px 18px;background:var(--c-ink);color:var(--c-bg);
  translate:var(--tip-x,0px) -4px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 160ms,translate 220ms var(--c-ease),visibility 0s 160ms; }
.career-tip:before { content:'';position:absolute;top:-6px;left:var(--caret-x,24px);width:12px;height:12px;margin-left:-6px;background:inherit;rotate:45deg;transition:left 260ms var(--c-ease); }
.career-tip.is-above { top:auto;bottom:calc(100% - var(--line-y) + 56px);translate:var(--tip-x,0px) 4px; }
.career-tip.is-above:before { top:auto;bottom:-6px; }
.career-tip.is-open { opacity:1;visibility:visible;translate:var(--tip-x,0px) 0;transition:opacity 180ms,translate 220ms var(--c-ease),visibility 0s; }
.career-tip.is-open.is-gliding { transition:opacity 180ms,translate 300ms var(--c-ease),visibility 0s; }
.career-entry>.mono { display:block;font-size:10.5px;opacity:.7; }
.career-entry strong { display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:8px; }
.career-entry>span:not(.mono) { display:block;font-size:13px;opacity:.75;margin-top:3px; }
.career-entry p { font-size:14px;line-height:1.55;margin-top:10px; }
.career-entry+.career-entry { margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--c-bg) 22%,transparent); }

@media (hover:hover) {
  .career-dot:not(.is-active):hover .career-badge { border-color:currentColor;color:inherit; }
}
@media (max-width:760px) {
  .career-ticks { font-size:10px; }
  .career-mark { font-size:13px; }
}
@media (max-width:560px) {
  .career-dot { width:20px;margin-left:-10px; }
}
@media (prefers-reduced-motion:reduce) {
  .career-tip,.career-tip.is-open { translate:var(--tip-x,0px) 0; }
}