/* ============================================================================
   XSetel · Organization Timeline
   Base stylesheet — structural + component CSS, deliberately theme-neutral.

   This file ships a *purple* reference palette. index.html layers the XSetel
   green palette on top via an inline <style> block in <head>: because that
   block is parsed after this linked stylesheet, it wins the cascade at equal
   specificity (:root vs :root) without any !important.
   ========================================================================== */

:root{
  /* --- theme tokens (overridden in index.html <head>) --- */
  --purple:#7259e7;
  --purple-bright:#a08bff;
  --ink:#17213d;
  --muted:#7d8698;
  --line:#e7eaf0;
  --bg:#fbfbfd;
  --wash:#f3f0ff;
  --wash-2:#fbfbfd;
  --accent-soft:rgba(114,89,231,.28);

  /* --- fixed tokens --- */
  --white:#ffffff;
  --gold:#f0c76a;
  --gold-bg:#fff8e6;
  --gold-ink:#7a5a12;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'DM Mono','SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- reset -- */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  height:100svh;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,p{margin:0}
button{font-family:inherit;color:inherit}
img{display:block;max-width:100%}
em{font-style:italic}

::selection{background:var(--purple);color:#fff}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--muted);background-clip:content-box;border:3px solid transparent}

:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------- app shell -- */

.app-shell{
  display:grid;
  grid-template-rows:70px 1fr;
  height:100svh;
}

/* ----------------------------------------------------------------- head -- */

.topbar{
  position:relative;
  z-index:40;
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,22px);
  padding:0 clamp(14px,3vw,32px);
  border-bottom:1px solid var(--line);
  background:var(--white);
}

.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:30px;width:auto}

.topbar-label{
  font:500 12px/1 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  padding-left:clamp(10px,1.6vw,18px);
  border-left:1px solid var(--line);
  white-space:nowrap;
}

.year-badge{
  flex:none;
  display:inline-grid;
  place-items:center;
  min-width:82px;
  padding:9px 18px;
  border-radius:999px;
  background:var(--purple);
  color:#fff;
  font:500 16px/1 var(--mono);
  letter-spacing:.06em;
  box-shadow:0 10px 22px -14px var(--purple);
  transition:background .3s ease;
}

.signout-btn{
  flex:none;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--muted);
  font:500 13px/1 var(--sans);
  padding:9px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:all .2s ease;
}
.signout-btn:hover{border-color:var(--purple);color:var(--purple);background:var(--wash)}

/* --------------------------------------------------------------- search -- */

.search{position:relative;margin-left:auto;flex:0 1 380px;min-width:0}

.search-field{
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--wash-2);
  transition:border-color .28s ease,box-shadow .28s ease,background .28s ease,transform .28s var(--ease);
}
.search.is-open .search-field,
.search-field:focus-within{
  background:var(--white);
  border-color:var(--purple);
  box-shadow:0 0 0 4px var(--accent-soft);
  transform:scale(1.02);
}

.search-field svg{flex:none;width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.search.is-open .search-field svg,
.search-field:focus-within svg{stroke:var(--purple)}

#search-input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:500 15px/1 var(--sans);
  color:var(--ink);
}
#search-input::placeholder{color:var(--muted);font-weight:400}

.search-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:min(430px,88vw);
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  box-shadow:0 30px 60px -30px rgba(23,33,61,.45),0 2px 8px -4px rgba(23,33,61,.18);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.98);
  transform-origin:top right;
  transition:opacity .26s ease,transform .32s var(--ease),visibility .26s;
}
.search.is-open .search-panel{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

.search-chips{display:flex;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}

.chip{
  border:1px solid var(--line);
  background:var(--white);
  color:var(--muted);
  font:500 13px/1 var(--mono);
  letter-spacing:.06em;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .24s ease;
}
.chip:hover{border-color:var(--purple);color:var(--ink)}
.chip.is-on{background:var(--purple);border-color:var(--purple);color:#fff}

.search-results{max-height:min(46vh,340px);overflow-y:auto;margin-top:8px}

.search-hint{
  font:500 13px/1.5 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  padding:10px 8px 6px;
}

.result{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:background .2s ease;
}
.result:hover,.result:focus-visible{background:var(--wash)}
.result-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.result-name{font:600 15px/1.3 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.result-role{font:400 13px/1.3 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.search-empty{padding:22px 10px;text-align:center;font:400 15px/1.5 var(--sans);color:var(--muted)}

/* --------------------------------------------------------------- scenes -- */

.experience{position:relative;overflow:hidden}

.scene{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(.86) translateY(18px);
  transition:opacity .5s ease,transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.scene.is-active{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.scene.is-leaving{opacity:0;transform:scale(1.08) translateY(-12px)}

/* content can exceed the fixed-height scene wrapper — let these two scroll */
#org-scene,#profile-scene{overflow-y:auto;overflow-x:hidden}

.scene-inner{
  max-width:1340px;
  margin:0 auto;
  padding:clamp(18px,3.2vh,34px) clamp(16px,3vw,34px) clamp(40px,6vh,72px);
}

/* --------------------------------------------------------- shared bits --- */

.kicker{
  font:500 13px/1.4 var(--mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}

.avatar{
  flex:none;
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--purple);
  color:#fff;
  font:500 15px/1 var(--mono);
  letter-spacing:.04em;
}
.avatar-sm{width:36px;height:36px;font-size:13px}
.avatar-lg{width:56px;height:56px;font-size:18px}
.avatar-xl{width:clamp(88px,9vw,110px);height:clamp(88px,9vw,110px);font-size:clamp(26px,2.6vw,32px)}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  font:600 14px/1 var(--sans);
  padding:11px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:all .26s var(--ease);
}
.back-btn:hover{border-color:var(--purple);color:var(--purple);transform:translateX(-3px);box-shadow:0 12px 24px -18px var(--purple)}

.tag{
  flex:none;
  font:500 12px/1 var(--mono);
  letter-spacing:.06em;
  padding:6px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.tag-entry{background:#e9f4f8;color:#1f6f8b}
.tag-role{background:var(--wash);color:var(--purple)}
.tag-win{background:#fdf2e5;color:#b4620e}

/* ================================================================ SCENE 1 ==
   Timeline homepage — rotating semicircle year wheel
   ========================================================================== */

#timeline-scene{display:flex;flex-direction:column;align-items:center;overflow:hidden}

.timeline-intro{
  flex:none;
  max-width:880px;
  padding:clamp(12px,2.8vh,34px) 24px clamp(4px,1.4vh,14px);
  text-align:center;
}
.timeline-intro h1{
  margin:14px 0 14px;
  font:800 clamp(36px,4.6vw,68px)/1.04 var(--sans);
  letter-spacing:-.028em;
}
.timeline-intro h1 em{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic;
  color:var(--purple);
  letter-spacing:-.01em;
}
.timeline-lede{
  font:400 17px/1.65 var(--sans);
  color:var(--muted);
  max-width:600px;
  margin:0 auto;
}

.timeline-stage{
  position:relative;
  width:100%;
  height:clamp(320px,46vh,540px);
  overflow:hidden;              /* clips everything below the top semicircle */
  touch-action:none;
  cursor:grab;
}
.timeline-stage.is-dragging{cursor:grabbing}

/* full-bleed transparent wrapper — must never eat clicks meant for anything
   layered beneath it; individual dots opt back in via inline pointer-events */
.timeline{position:absolute;inset:0;pointer-events:none}

.year-dot{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  width:190px;
  margin:0;padding:0;
  border:0;background:transparent;
  transform-origin:50% 16px;
  cursor:pointer;
  will-change:transform,opacity;
}

.year-dot .dot{
  width:32px;height:32px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 4px var(--white),0 12px 22px -10px rgba(23,33,61,.65);
  transition:background .3s ease,transform .34s var(--ease),box-shadow .3s ease;
}
.year-dot:hover .dot,
.year-dot.current .dot{
  background:var(--purple);
  transform:scale(1.2);
  box-shadow:0 0 0 5px var(--white),0 16px 30px -10px var(--purple);
}

.year-num{
  font:500 20px/1 var(--mono);
  letter-spacing:.02em;
  color:var(--ink);
  transition:font-size .3s var(--ease),color .3s ease;
}
.year-dot:hover .year-num,
.year-dot.current .year-num{font-size:23px;color:var(--purple)}

.year-blurb{
  font:400 13px/1.4 var(--sans);
  color:var(--muted);
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .38s var(--ease),opacity .3s ease;
}
.year-dot:hover .year-blurb,
.year-dot.current .year-blurb{max-height:46px;opacity:1}

.year-mid{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  margin:0;padding:0;
  border:0;background:transparent;
  transform-origin:50% 6.5px;
  cursor:pointer;
  will-change:transform,opacity;
}
.year-mid .mid-dot{
  width:13px;height:13px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--muted);
  transition:transform .3s var(--ease),border-color .3s ease,box-shadow .3s ease;
}
.year-mid:hover .mid-dot{
  transform:scale(1.45);
  border-color:var(--purple);
  box-shadow:0 0 0 6px var(--accent-soft);
}
.mid-pill{
  font:500 12px/1 var(--mono);
  letter-spacing:.1em;
  color:var(--muted);
  background:var(--white);
  border:1px solid var(--line);
  padding:6px 11px;
  border-radius:999px;
  white-space:nowrap;
  transition:color .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.year-mid:hover .mid-pill{color:var(--ink);border-color:var(--purple);box-shadow:0 10px 20px -14px var(--purple)}

.timeline-hint{
  flex:none;
  padding:clamp(2px,0.6vh,8px) 24px 0;
  font:500 14px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}

/* ------------------------------------------------------------- chatbot -- */

.chatbot{
  /* fills whatever room is left under the timeline wheel - #timeline-scene
     is a fixed-height, overflow:hidden flex column, so this must shrink to
     fit rather than claim a fixed height, or the input at the bottom gets
     pushed past the visible/clickable area with no scroll fallback. */
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:720px;
  margin:clamp(4px,0.8vh,10px) auto clamp(12px,2vh,20px);
  padding:16px 20px 18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--white);
  box-shadow:0 20px 48px -30px rgba(20,28,15,.4);
}

.chatbot-head{flex:none;display:flex;align-items:center;gap:9px;padding:0 2px 12px;border-bottom:1px solid var(--line)}
.chatbot-dot{width:9px;height:9px;border-radius:50%;background:var(--purple-bright);box-shadow:0 0 0 3px var(--accent-soft);animation:pulse 2s ease-in-out infinite}
.chatbot-title{font:600 13.5px/1.2 var(--sans);color:var(--ink)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

.chatbot-log{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-height:56px;
  overflow-y:auto;
  padding:10px 6px;
  scroll-behavior:smooth;
}

.chatbot-msg{
  max-width:88%;
  padding:11px 15px;
  border-radius:16px;
  font:400 14px/1.6 var(--sans);
  word-wrap:break-word;
  white-space:pre-line;
}
.chatbot-msg.is-bot{
  align-self:flex-start;
  background:var(--wash);
  color:var(--ink);
  border-bottom-left-radius:6px;
  box-shadow:0 2px 8px -2px rgba(20,28,15,.1);
}
.chatbot-msg.is-user{
  align-self:flex-end;
  background:var(--purple);
  color:#fff;
  border-bottom-right-radius:6px;
  box-shadow:0 2px 10px -2px rgba(61,117,18,.25);
}

.chatbot-form{flex:none;display:flex;align-items:center;gap:10px;padding:12px 0 0;border-top:1px solid var(--line)}
.chatbot-form input{
  flex:1;
  min-width:0;
  height:44px;
  padding:0 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--wash-2);
  font:400 14px/1.2 var(--sans);
  color:var(--ink);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.chatbot-form input::placeholder{color:var(--muted)}
.chatbot-form input:focus-visible{outline:none}
.chatbot-form input:focus{border-color:var(--purple);background:var(--white);box-shadow:0 0 0 4px var(--accent-soft)}

.chatbot-form button{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:var(--purple);
  cursor:pointer;
  transition:background .25s ease,transform .2s ease;
}
.chatbot-form button:hover{background:var(--purple-bright);transform:translateY(-1px)}
.chatbot-form button:active{transform:scale(.94)}
.chatbot-form button svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------- file upload -- */

.file-upload{position:relative;flex:none}

.file-upload-btn{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--wash-2);
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .2s ease;
}
.file-upload-btn:hover{border-color:var(--purple);background:var(--white)}
.file-upload-btn:active{transform:scale(.92)}
.file-upload-btn svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

.file-upload-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:60;
  width:280px;
  max-height:340px;
  overflow-y:auto;
  padding:14px 14px 10px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--white);
  box-shadow:0 24px 48px -24px rgba(20,28,15,.4);
  opacity:0;
  transform:translateY(-8px) scale(.98);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s var(--ease);
}
.file-upload.is-open .file-upload-panel{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.file-upload-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.file-upload-empty{font:400 13px/1.5 var(--sans);color:var(--muted)}

.file-upload-add{
  width:100%;
  margin-top:10px;
  padding:8px 10px;
  border:1px dashed var(--line);
  border-radius:12px;
  background:transparent;
  color:var(--purple);
  font:500 12.5px/1 var(--sans);
  cursor:pointer;
  transition:border-color .25s ease,background .25s ease;
}
.file-upload-add:hover{border-color:var(--purple);background:var(--wash)}

.file-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--wash-2);
}
.file-chip-icon{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--wash);
  font:600 10px/1 var(--mono);
  color:var(--purple);
  letter-spacing:.02em;
}
.file-chip-name{
  flex:1;
  min-width:0;
  font:500 12.5px/1.3 var(--sans);
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.file-chip-remove{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  border:none;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font:400 15px/1 var(--sans);
}
.file-chip-remove:hover{background:var(--wash);color:var(--ink)}

/* ================================================================ MODAL ====
   Change details — zooms out of the mid-point marker that was clicked
   ========================================================================== */

.change-modal{position:fixed;inset:0;z-index:90;pointer-events:none}
.change-modal.open{pointer-events:auto}

.change-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(20,28,15,.5);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  opacity:0;
  transition:opacity .42s ease;
}
.change-modal.open .change-modal-backdrop{opacity:1}

.change-modal-card{
  position:fixed;
  left:var(--ox,50%);
  top:var(--oy,50%);
  width:min(580px,92vw);
  max-height:86svh;
  overflow-y:auto;
  padding:clamp(24px,3vw,34px);
  border-radius:26px;
  background:var(--white);
  box-shadow:0 50px 90px -40px rgba(20,28,15,.6);
  transform:translate(-50%,-50%) scale(.12);
  opacity:0;
  transform-origin:center;
  will-change:left,top,transform,opacity;
  transition:left .5s var(--ease),top .5s var(--ease),transform .5s var(--ease),opacity .4s ease;
}
.change-modal.open .change-modal-card{
  left:50%;top:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
}

.change-close{
  position:absolute;
  top:18px;right:18px;
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--white);
  color:var(--muted);
  font-size:19px;line-height:1;
  cursor:pointer;
  transition:transform .32s var(--ease),color .26s ease,border-color .26s ease;
}
.change-close:hover{transform:rotate(90deg);color:var(--purple);border-color:var(--purple)}

.cm-title{
  margin:12px 46px 10px 0;
  font:800 clamp(28px,3.2vw,38px)/1.1 var(--sans);
  letter-spacing:-.022em;
}
.cm-date{
  font:500 14px/1 var(--mono);
  letter-spacing:.14em;
  color:var(--purple);
}
.cm-note{
  margin-top:14px;
  font:400 16px/1.65 var(--sans);
  color:var(--muted);
}

.cm-who{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.cm-who-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}

.who-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:transparent;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,transform .26s var(--ease);
}
.who-row:hover{background:var(--wash);border-color:var(--line);transform:translateX(3px)}
.who-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.who-name{font:600 15px/1.3 var(--sans)}
.who-event{font:400 14px/1.35 var(--sans);color:var(--muted)}

.cm-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:24px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.cm-stat{background:var(--white);padding:15px 14px;display:flex;flex-direction:column;gap:7px}
.cm-stat-label{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cm-stat-value{font:600 15px/1.35 var(--sans);color:var(--ink)}
.cm-stat-value.is-num{font:500 26px/1 var(--mono)}

.cm-cta{
  width:100%;
  margin-top:22px;
  border:0;
  background:var(--purple);
  color:#fff;
  font:600 16px/1 var(--sans);
  padding:17px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s ease,filter .25s ease;
}
.cm-cta:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 20px 34px -20px var(--purple)}

/* -------------------------------------------------------- role modal ---- */

.rm-milestone{
  padding:10px 12px;
  border-radius:14px;
  background:var(--wash-2);
}
.rm-milestone + .rm-milestone{margin-top:6px}
.rm-milestone p{margin-top:6px;font:400 14px/1.5 var(--sans);color:var(--ink)}

/* ================================================================ SCENE 2 ==
   Organization chart
   ========================================================================== */

.org-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

.seg{
  position:relative;
  display:inline-flex;
  padding:5px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
}
.seg-thumb{
  position:absolute;
  top:5px;left:0;
  height:calc(100% - 10px);
  width:0;
  border-radius:999px;
  background:var(--purple);
  transition:transform .4s var(--ease),width .4s var(--ease);
}
.seg-btn{
  position:relative;
  z-index:1;
  border:0;background:transparent;
  font:600 14px/1 var(--sans);
  color:var(--muted);
  padding:11px 20px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .3s ease;
}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-active,.seg-btn.is-active:hover{color:#fff}

.org-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  margin:clamp(18px,3vh,32px) 0 clamp(16px,2.4vh,26px);
}
.org-head h2{
  margin:12px 0 12px;
  font:800 clamp(38px,5vw,64px)/1.03 var(--sans);
  letter-spacing:-.03em;
}
.org-head h2 em{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-style:italic;
  color:var(--purple);
}
.org-sum{font:400 17px/1.6 var(--sans);color:var(--muted);max-width:620px}

.hc-badge{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:18px 26px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--white);
}
.hc-num{font:500 34px/1 var(--mono);letter-spacing:-.01em;color:var(--purple)}
.hc-label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.org-map{
  padding:clamp(20px,2.6vw,36px);
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--white);
  overflow:visible;
  box-shadow:0 24px 60px -46px rgba(23,33,61,.5);
}
/* Kept as one line, never wrapped or side-scrolled: `zoom` is set from JS
   (fitOrgTree in app.js) to shrink the whole tree to the available width.
   `zoom` (not transform) is used deliberately - it's layout-affecting, so
   the container's height tracks the shrunk size automatically, and team
   rows expanding/collapsing later don't need a re-fit. */
.org-tree{width:max-content}

/* --- CEO --- */

.org-ceo-row{position:relative;display:flex;justify-content:center;padding-bottom:34px}
.org-ceo-row::after{
  content:'';
  position:absolute;left:50%;bottom:0;
  margin-left:-1px;
  width:2px;height:34px;
  background:var(--line);
}

.node{
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  border:2px solid var(--purple);
  border-radius:20px;
  background:linear-gradient(180deg,var(--wash) 0%,var(--white) 90%);
  padding:16px 28px 16px 18px;
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.node:hover{transform:translateY(-3px);box-shadow:0 22px 40px -26px var(--purple)}
.node .p-text{display:flex;flex-direction:column;gap:3px}
.node .p-name{font:700 19px/1.25 var(--sans);letter-spacing:-.012em}
.node .p-role{font:400 15px/1.3 var(--sans);color:var(--muted)}

/* --- branch + departments --- */

.org-branch{
  position:relative;
  display:flex;
  /* shrink-to-fit + auto margins (not a stretched block + justify-content)
     so this row's box always matches its own visible column cluster - if it
     instead stretched to fill .org-tree (which can be wider, sized off the
     CEO row above), the connector lines below would be positioned relative
     to that wider box and end up floating past the actual columns */
  width:max-content;
  margin:0 auto;
  /* always one row - department count (5-9) varies year to year, so the
     row's natural width varies too; fitOrgTree() zooms the whole .org-tree
     down to fit rather than letting this wrap or scroll */
  flex-wrap:nowrap;
  gap:16px;
  padding-top:36px;
}
.org-branch::before{
  content:'';
  position:absolute;
  top:0;left:10%;right:10%;
  height:2px;
  background:var(--line);
}

.dept-col{position:relative;display:flex;flex-direction:column;gap:14px;flex:none;width:200px}
.dept-col::before{
  content:'';
  position:absolute;
  top:-36px;left:50%;
  margin-left:-1px;
  width:2px;height:36px;
  background:var(--line);
}

.exec-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  text-align:center;
  margin-top:11px;
  padding:22px 14px 18px;
  border:2px solid var(--dc);
  border-radius:18px;
  background:linear-gradient(180deg,var(--dw) 0%,var(--white) 84%);
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s ease;
}
.exec-card:hover{transform:translateY(-3px);box-shadow:0 20px 36px -24px var(--dc)}

.dept-code{
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  background:var(--dc);
  color:#fff;
  font:500 12px/1 var(--mono);
  letter-spacing:.14em;
  padding:6px 12px;
  border-radius:999px;
}
.exec-name{font:700 17px/1.25 var(--sans);letter-spacing:-.01em}
.exec-role{font:400 14px/1.4 var(--sans);color:var(--muted)}

/* --- team list --- */

.team-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  overflow:hidden;
}
.team-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  background:var(--wash-2);
  font:500 12px/1.3 var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.team-card-head b{color:var(--ink);font-weight:500}

.team{border-bottom:1px solid var(--line)}
.team:last-child{border-bottom:0}

.team-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:13px 15px;
  cursor:pointer;
  transition:background .22s ease;
}
.team-row:hover{background:var(--wash)}
.team-name{flex:1;min-width:0;font:600 15px/1.3 var(--sans);letter-spacing:-.005em}
.team-count{
  flex:none;
  font:500 12px/1 var(--mono);
  color:var(--muted);
  background:var(--wash-2);
  border:1px solid var(--line);
  padding:5px 9px;
  border-radius:999px;
}
.chev{flex:none;display:inline-block;color:var(--muted);font-size:16px;line-height:1;transition:transform .3s var(--ease),color .25s ease}
.team.is-open .chev{transform:rotate(90deg);color:var(--purple)}
.team.is-open>.team-row{background:var(--wash)}

.team-members{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.team-members-inner{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:6px;
  padding:4px 12px 14px;
}

.staff-pill{
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
  font:500 13px/1.3 var(--sans);
  text-align:left;
  padding:9px 11px;
  border-radius:10px;
  cursor:pointer;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:all .22s ease;
}
.staff-pill:hover{border-color:var(--purple);color:var(--purple);background:var(--wash);transform:translateY(-1px)}
.staff-pill.is-leader{
  background:var(--gold-bg);
  border-color:var(--gold);
  color:var(--gold-ink);
  font-weight:700;
}
.staff-pill.is-leader:hover{background:#fff3d4;border-color:#e0b354;color:var(--gold-ink);transform:translateY(-1px)}

/* role-only mode --------------------------------------------------------- */

.org-map.role-only .avatar,
.org-map.role-only .p-name,
.org-map.role-only .exec-name{display:none}

.org-map.role-only .p-role{font:700 19px/1.25 var(--sans);color:var(--ink)}
.org-map.role-only .exec-role{font:700 16px/1.3 var(--sans);color:var(--ink)}

/* team rows expand as normal - each pill swaps its name for its role text,
   and both the node/exec-card AND every staff-pill open the role-chronology
   modal (openRoleModal in app.js) instead of a person's profile. */
.org-map.role-only .node,
.org-map.role-only .exec-card{padding-left:18px;padding-right:18px;cursor:pointer}

.pill-role{display:none}
.org-map.role-only .staff-pill .pill-name{display:none}
.org-map.role-only .staff-pill .pill-role{display:inline;font-weight:700;color:var(--ink)}
.org-map.role-only .chev{opacity:.22}

/* ================================================================ SCENE 3 ==
   Profile
   ========================================================================== */

.profile-grid{
  display:grid;
  grid-template-columns:minmax(300px,.92fr) 1.08fr;
  gap:clamp(28px,4.4vw,68px);
  margin-top:clamp(20px,3.4vh,36px);
}

.profile-left{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.profile-left .avatar-xl{margin-bottom:22px}
.profile-left h2{
  margin:10px 0 8px;
  font:800 clamp(38px,4.2vw,56px)/1.05 var(--sans);
  letter-spacing:-.03em;
}
.profile-role{font:500 18px/1.4 var(--sans);color:var(--purple)}
.profile-bio{margin-top:16px;font:400 17px/1.68 var(--sans);color:var(--muted)}

.facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  width:100%;
  margin-top:28px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}
.fact{background:var(--white);padding:16px 16px;display:flex;flex-direction:column;gap:8px}
.fact-label{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fact-value{font:600 16px/1.4 var(--sans);color:var(--ink)}

.profile-right h3{
  margin:12px 0 22px;
  font:800 clamp(28px,2.6vw,34px)/1.15 var(--sans);
  letter-spacing:-.024em;
}

.history{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:26px}
.history::before{
  content:'';
  position:absolute;
  left:10px;top:26px;bottom:26px;
  width:2px;
  background:var(--line);
}

.hcard{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
  padding:17px 52px 18px 20px;
  cursor:pointer;
  transition:box-shadow .3s ease,border-color .26s ease;
  /* base (pre-reveal) motion state — see "path so far" reveal block below */
  opacity:0;
  transform:translateY(30px) scale(.95);
}
.hcard::before{
  content:'';
  position:absolute;
  left:-21px;top:24px;
  width:12px;height:12px;
  border-radius:50%;
  background:var(--white);
  border:2px solid var(--purple);
  transition:transform .3s var(--ease),background .26s ease;
}
.hcard:hover{border-color:var(--purple);box-shadow:0 22px 40px -28px var(--purple)}
.hcard:hover::before{transform:scale(1.28);background:var(--purple)}

.hcard-meta{
  display:block;
  font:500 12px/1 var(--mono);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
}
.hcard-event{
  display:block;
  margin-top:10px;
  font:700 19px/1.35 var(--sans);
  letter-spacing:-.014em;
  color:var(--ink);
}
.hcard-arrow{
  position:absolute;
  right:20px;top:50%;
  transform:translateY(-50%);
  font-size:20px;line-height:1;
  color:var(--muted);
  transition:transform .3s var(--ease),color .26s ease;
}
.hcard:hover .hcard-arrow{transform:translateY(-50%) translateX(7px);color:var(--purple)}

/* ================================================================ motion ===
   Profile entrance (click a person -> profile scene) + "the path so far"
   choreography: fade/slide/scale in, scroll-triggered stagger, spring hover,
   fast fade-out exit. Transform is handed off from CSS to a small JS spring
   (see bindHistorySpring in app.js) once each card has settled, so the two
   never fight over the `transform` property at the same time.
   ========================================================================== */

.profile-left,
.profile-right{
  opacity:0;
  transform:translateY(30px) scale(.95);
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);
}
#profile-scene.is-active .profile-left{opacity:1;transform:translateY(0) scale(1)}
#profile-scene.is-active .profile-right{opacity:1;transform:translateY(0) scale(1);transition-delay:.08s}

/* "the path so far" — each history card starts hidden; is-entering carries
   the one-shot reveal transition, is-visible holds the settled state. Once
   the reveal finishes, JS strips is-entering so transform is transition-free
   and free for the hover spring to drive directly (see app.js). */
.hcard.is-entering{
  transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);
}
.hcard.is-visible{opacity:1;transform:translateY(0) scale(1)}

/* leaving the profile scene: quick in-place fade, no slide/scale */
#profile-scene.is-leaving .profile-left,
#profile-scene.is-leaving .profile-right,
#profile-scene.is-leaving .hcard{
  transition:opacity .2s ease-in;
  opacity:0;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  .profile-left,.profile-right,.hcard,.hcard.is-entering{
    transition:none;
  }
  #profile-scene.is-leaving .profile-left,
  #profile-scene.is-leaving .profile-right,
  #profile-scene.is-leaving .hcard{transition:none}
}

/* ============================================================ animations ==
   "Time travel" flash — a ring pulse + brightness bump so it reads the same
   on gradient exec cards and flat staff pills alike.
   ========================================================================== */

@keyframes flashPulse{
  0%  {box-shadow:0 0 0 0 var(--accent-soft);filter:brightness(1)}
  16% {box-shadow:0 0 0 9px var(--accent-soft);filter:brightness(1.1)}
  38% {box-shadow:0 0 0 0 var(--accent-soft);filter:brightness(1)}
  56% {box-shadow:0 0 0 9px var(--accent-soft);filter:brightness(1.1)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);filter:brightness(1)}
}
.flash{
  animation:flashPulse 1.4s var(--ease) 1;
  position:relative;
  z-index:3;
  border-radius:12px;
}

/* ============================================================= responsive ==
   ========================================================================== */

@media (max-width:1080px){
  .topbar-label{display:none}
  .search{flex:0 1 300px}
}

@media (max-width:980px){
  /* narrow viewports stack departments instead of zooming a one-line chart
     down to an unreadable size - fitOrgTree() also no-ops below this width */
  .org-tree{width:100%}
  .org-branch{width:100%;margin:0;flex-direction:column;flex-wrap:wrap;gap:30px;padding-top:0}
  .dept-col{width:100%}
  .org-branch::before{display:none}
  .dept-col::before{display:none}
  .org-ceo-row{padding-bottom:26px}
  .org-ceo-row::after{display:none}
  .exec-card{margin-top:14px}
  .profile-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .app-shell{grid-template-rows:64px 1fr}
  .search{flex:1 1 auto}
  .brand img{height:26px}
  .year-badge{min-width:70px;padding:8px 14px;font-size:14px}
  .facts{grid-template-columns:1fr}
  .cm-stats{grid-template-columns:1fr}
  .org-head{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
