/* My archive: a year-based diagram inside PotoDesign's existing dark world.
   Geometry is derived from published years, inclusive at year granularity.
   Local sizing uses existing spacing/control tokens; no global tokens change. */
.career-timeline {
  --career-row-height: calc(var(--poto-control-height) + var(--poto-space-sm));
  /* A readable year cell, instead of compressing ten years into the viewport. */
  --career-year-width: calc(var(--poto-control-height) * 5 + var(--poto-space-md));
  --career-preview-gap: var(--poto-space-sm);
  --career-preview-margin: var(--poto-space-lg);
  position: relative;
  padding: calc(var(--poto-space-xxl) + var(--poto-space-xl)) var(--poto-space-xl) calc(var(--poto-space-xl) * 2);
  background: var(--archive-black);
}
.career-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--poto-space-lg); margin-bottom: var(--poto-space-xl); }
.career-timeline h2 { margin: 0; font-family: 'Poto Reference Variable', Arial, sans-serif; font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -.025em; }
.career-navigation { display: flex; align-items: center; gap: var(--poto-space-lg); }
.career-navigation p { margin: 0; color: var(--poto-glass-muted); font-size: .75rem; white-space: nowrap; }
.career-hint-touch { display: none; }
.career-jump { min-height: var(--poto-control-height); padding: var(--poto-space-sm) var(--poto-space-md); border: 1px solid var(--poto-glass-line); border-radius: var(--poto-control-radius); background: transparent; color: var(--poto-paper); font: inherit; font-size: .8125rem; font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--poto-fast) var(--poto-ease), border-color var(--poto-fast) var(--poto-ease); }
.career-jump:is(:hover, :focus-visible):not(:disabled) { background: var(--poto-glass-header); border-color: var(--poto-blue-light); }
.career-jump:disabled { color: var(--poto-glass-muted); border-color: color-mix(in srgb, var(--poto-glass-line) 55%, transparent); cursor: default; }
.career-scroll { overflow-x: auto; padding: var(--poto-space-sm) var(--poto-space-xs) var(--poto-space-md); touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--poto-blue-light) var(--archive-black); border-radius: var(--poto-control-radius); }
.career-scroll.is-draggable { cursor: grab; }
.career-scroll.is-dragging, .career-scroll.is-dragging .career-entry { cursor: grabbing; user-select: none; }
.career-chart { position: relative; width: max(100%, calc(var(--career-year-width) * var(--career-year-count))); }
.career-year-axis, .career-year-guides { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.career-year-axis { margin-bottom: var(--poto-space-lg); color: var(--poto-glass-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.career-year-axis span { padding-left: var(--poto-space-xs); }
.career-year-guides { position: absolute; inset: calc(var(--poto-space-lg) + var(--poto-space-md)) 0 0; pointer-events: none; }
.career-year-guides span { border-left: 1px solid color-mix(in srgb, var(--poto-glass-line) 40%, transparent); }
.career-entries { position: relative; display: grid; gap: var(--poto-space-lg); margin: 0; padding: 0; list-style: none; }
.career-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); min-height: var(--career-row-height); }
.career-entry {
  position: relative;
  grid-column: calc(var(--career-start) + 1) / span var(--career-duration);
  display: flex;
  align-items: center;
  gap: var(--poto-space-sm);
  width: 100%;
  min-width: 0;
  min-height: var(--career-row-height);
  padding: var(--poto-space-xs) var(--poto-space-md);
  border: 1px solid color-mix(in srgb, var(--poto-glass-line) 65%, transparent);
  border-radius: var(--poto-control-radius);
  background: color-mix(in srgb, var(--reference-dark) 70%, var(--archive-black));
  color: var(--poto-paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--poto-fast) var(--poto-ease), border-color var(--poto-fast) var(--poto-ease);
}
.career-entry:is(:hover, :focus-visible, [aria-expanded='true']) { background: var(--poto-glass-header); border-color: var(--poto-blue-light); }
.career-label { display: flex; align-items: baseline; gap: var(--poto-space-sm); width: 100%; min-width: 0; white-space: nowrap; }
.career-role { flex-shrink: 0; font-size: .9375rem; line-height: 1.2; font-weight: 600; }
.career-company { flex-shrink: 0; color: var(--poto-glass-muted); font-size: .875rem; line-height: 1.2; }
.career-dates { margin-left: auto; color: var(--poto-glass-muted); font-size: .8125rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.career-current { background: linear-gradient(110deg, var(--poto-blue-deep), var(--poto-glass-header)); border-color: var(--poto-blue-light); }
.career-current:is(:hover, :focus-visible, [aria-expanded='true']) { background: var(--poto-blue-deep); border-color: var(--poto-year-accent); }
.career-flow { display: none; }
.career-preview { position: fixed; z-index: 18; width: min(calc(var(--poto-review-width) * .75), calc(100vw - var(--poto-space-lg) * 2)); margin: 0; overflow: hidden; border-radius: var(--poto-card-radius); background: var(--poto-year-ink); box-shadow: var(--poto-shadow); }
.career-preview-image { display: block; width: 100%; height: min(calc(var(--poto-control-height) * 4 + var(--poto-space-lg)), 32svh); object-fit: contain; background: var(--archive-black); }
.career-preview-caption { padding: var(--poto-space-sm) var(--poto-space-md); color: var(--poto-glass-muted); font-size: .75rem; line-height: 1.5; }
.career-preview.is-preview-open { animation: career-preview-enter calc(var(--poto-fast) * 1.5) var(--poto-ease) both; }
@keyframes career-preview-enter { from { opacity: .2; transform: translateY(var(--poto-space-sm)); } to { opacity: 1; transform: translateY(0); } }
.career-timeline[data-reduced-motion='true'] .career-preview { animation: none; }
/* Approved main desktop refinement. The track owns only this timeline;
   its sticky stage leaves the fixed preview outside the stacking context. */
@media (min-width: 601px) {
  .poto-main .career-timeline {
    /* Ten equal columns fit the full desktop width; labels retain their type. */
    --career-row-height: calc(var(--poto-control-height) + var(--poto-space-md));
    padding: 0;
  }
  .poto-main .career-stage {
    position: relative;
    /* Reserve the fixed header, then center the timeline in the remaining stage. */
    padding: calc(var(--poto-control-height) + var(--poto-space-lg) + var(--poto-space-sm) + var(--poto-space-xl)) var(--poto-space-xl) var(--poto-space-xl);
    background: var(--archive-black);
  }
  .poto-main .career-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; margin-bottom: var(--poto-space-lg); }
  .poto-main .career-heading h2 { grid-column: 2; text-align: center; }
  .poto-main .career-navigation { display: none; }
  .poto-main .career-chart { width: 100%; }
  .poto-main .career-entry { padding-block: var(--poto-space-sm); }
  .poto-main .career-label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--poto-space-xs) var(--poto-space-sm); white-space: normal; }
  .poto-main .career-role { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .poto-main .career-company { min-width: 0; overflow-wrap: anywhere; }
  .poto-main .career-dates { margin-left: 0; justify-self: end; white-space: nowrap; }
  .poto-main .career-entries { gap: var(--poto-space-md); }
  .poto-main .career-timeline.is-viewport > .career-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100svh; }
  .poto-main .career-timeline.is-viewport .career-scroll { min-height: 0; }
  .poto-main .career-timeline.is-viewport .career-chart { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
  .poto-main .career-timeline.is-viewport .career-entries { align-content: center; }
  .poto-main .career-timeline.is-sticky { height: calc(100svh + var(--career-hold)); }
  .poto-main .career-timeline.is-sticky > .career-stage { position: sticky; top: 0; }
  /* A blurred reading surface replaces the travelling perimeter light. */
  .poto-main .career-scroll { padding-inline: var(--poto-space-sm); }
  .poto-main .career-current {
    background: var(--poto-glass-header);
    backdrop-filter: blur(var(--poto-glass-blur));
    -webkit-backdrop-filter: blur(var(--poto-glass-blur));
    box-shadow: inset 0 1px 0 var(--poto-glass-line);
  }
  .poto-main .career-current:is(:hover, :focus-visible, [aria-expanded='true']) {
    background: color-mix(in srgb, var(--poto-blue-deep) 70%, transparent);
    border-color: var(--poto-blue-light);
  }
  .poto-main .career-current::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(125deg, color-mix(in srgb, var(--poto-paper) 12%, transparent), transparent 55%);
    pointer-events: none;
  }
  .poto-main .career-current::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(ellipse at 25% 0%, color-mix(in srgb, var(--poto-year-accent) 24%, transparent), transparent 70%);
    filter: blur(var(--poto-space-xs)); opacity: .55;
    transition: opacity var(--poto-fast) var(--poto-ease);
  }
  .poto-main .career-current:is(:hover, :focus-visible, [aria-expanded='true'])::after { opacity: .85; }
  .poto-main .career-current .career-label { position: relative; z-index: 1; }
  .poto-main .career-flow { display: none; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  /* A third line keeps complete company names readable on smaller desktops. */
  .poto-main .career-entry { padding-inline: var(--poto-space-sm); }
  .poto-main .career-label { grid-template-columns: minmax(0, 1fr); }
  .poto-main .career-dates { justify-self: start; }
}
@media (max-width: 700px) {
  .career-timeline { padding-inline: var(--poto-space-lg); padding-bottom: var(--poto-space-xxl); }
  .career-heading { align-items: flex-start; flex-wrap: wrap; }
  .career-navigation { justify-content: space-between; width: 100%; }
  .career-hint-mouse { display: none; }
  .career-hint-touch { display: inline; }
}
@media (min-width: 601px) and (max-width: 700px) {
  .poto-main .career-stage { padding-inline: var(--poto-space-lg); }
  .poto-main .career-heading { grid-template-columns: 1fr; }
  .poto-main .career-heading h2, .poto-main .career-navigation { grid-column: 1; }
  .poto-main .career-navigation { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .career-preview.is-preview-open { animation: none; } .poto-main .career-current::after { transition: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .poto-main .career-current { background: var(--poto-blue-deep); }
}
@media (prefers-reduced-transparency: reduce) {
  .poto-main .career-current { background: var(--poto-blue-deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.career-preview-image[hidden] { display:none; }