/* ══════════════════════════════════════════════════
   CAREER ATLAS — Finsembly Design System
   Pathway accordion · Role cards · Detail panel · Finn AI
   Sharp corners everywhere (except Finn FAB = circular)
   ══════════════════════════════════════════════════ */

/* ── HERO ── */
.hero{padding:44px 36px 32px;border-bottom:1px solid var(--line);}
.hero-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.hero h1{font-family:var(--serif);font-style:italic;font-weight:500;font-size:40px;line-height:1.08;letter-spacing:-0.02em;margin-bottom:12px;}
.hero h1 em{font-style:normal;color:var(--gold);}
.hero-sub{font-size:0.95rem;color:var(--muted);max-width:580px;line-height:1.65;margin-bottom:24px;}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;}
.hero-stat{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);}
.hero-stat .num{font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-0.02em;font-family:var(--serif);}

/* ── MAIN ── */
.atlas-main{padding:32px 36px 80px;}

/* ── PATHWAYS ── */
.pathways-container{display:flex;flex-direction:column;gap:3px;}
.pathway-header{background:var(--ink);color:var(--cream);padding:16px 24px;display:flex;align-items:center;cursor:pointer;transition:background 0.2s ease;gap:8px;}
.pathway-header:hover{background:var(--ink-2);}
.pathway-num{font-family:var(--serif);font-size:28px;font-style:italic;color:var(--gold);min-width:36px;line-height:1;}
.pathway-label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;flex:1;}
.pathway-tagline{font-family:var(--mono);font-size:9px;color:rgba(245,240,232,0.5);letter-spacing:0.05em;display:none;}
@media(min-width:700px){.pathway-tagline{display:block;}}
.pathway-count{font-family:var(--mono);font-size:10px;color:var(--gold);letter-spacing:0.06em;}
.pathway-toggle{color:var(--cream);font-size:14px;margin-left:8px;transition:transform 0.3s ease;}
.pathway.open .pathway-toggle{transform:rotate(180deg);}
.pathway-body{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
.pathway.open .pathway-body{max-height:6000px;}
.pathway-intro{padding:20px 24px;border:1px solid var(--line);border-top:none;font-size:0.9rem;color:var(--muted);line-height:1.65;background:var(--off-white);}

/* Sub-branch labels */
.sub-branch-label{padding:8px 24px;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-top:none;background:rgba(201,168,76,0.05);}

/* ── ROLE CARDS ── */
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));border:1px solid var(--line);border-top:none;}
.role-card{padding:22px 24px;background:white;display:flex;flex-direction:column;transition:all 0.15s ease;cursor:pointer;position:relative;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.role-card:hover{background:var(--off-white);}
.role-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width 0.15s ease;}
.role-card:hover::before{width:3px;}
.role-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.role-card-branch{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%;}
.role-seniority{display:flex;gap:2px;flex-shrink:0;}
.role-seniority-bar{width:5px;height:16px;background:var(--cream-2);}
.role-seniority-bar.filled{background:var(--gold);}
.role-card-title{font-family:var(--serif);font-size:1.05rem;font-weight:500;line-height:1.25;margin-bottom:8px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.role-card-summary{font-size:0.82rem;line-height:1.5;color:var(--muted);flex-grow:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:12px;}
.role-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line);}
.role-card-salary{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:0.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.role-card-arrow{width:16px;height:16px;color:var(--muted);flex-shrink:0;transition:color 0.15s ease;}
.role-card:hover .role-card-arrow{color:var(--gold);}
.badge-new{display:inline-block;font-family:var(--mono);font-size:7px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;background:rgba(26,122,74,0.12);color:var(--green);padding:1px 5px;margin-left:6px;vertical-align:middle;}

/* ── DETAIL PANEL (slide-out from right) ── */
.detail-overlay{position:fixed;top:0;right:0;bottom:0;width:500px;max-width:100vw;background:var(--cream);z-index:100;transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);overflow-y:auto;box-shadow:-4px 0 24px rgba(15,15,26,0.12);}
.detail-overlay.open{transform:translateX(0);}
.detail-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,15,26,0.35);z-index:99;opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
.detail-backdrop.open{opacity:1;pointer-events:all;}
.detail-close{position:absolute;top:16px;right:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--cream);z-index:10;cursor:pointer;}
.detail-header{background:var(--ink);color:var(--cream);padding:36px 28px 28px;}
.detail-breadcrumb{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(245,240,232,0.5);margin-bottom:16px;}
.detail-title{font-family:var(--serif);font-size:1.6rem;font-style:italic;line-height:1.15;margin-bottom:10px;}
.detail-meta{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
.detail-branch-tag{font-family:var(--mono);font-size:9px;letter-spacing:0.05em;text-transform:uppercase;background:rgba(201,168,76,0.2);color:var(--gold);padding:3px 7px;}
.detail-summary{font-size:0.9rem;line-height:1.55;opacity:0.85;}
.detail-full-page-link{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);text-decoration:none;transition:opacity 0.2s;}
.detail-full-page-link:hover{opacity:0.75;}
.detail-body{padding:28px;}
.detail-section{margin-bottom:24px;}
.detail-section-title{font-family:var(--serif);font-size:1.05rem;margin-bottom:10px;}
.detail-section p{font-size:0.88rem;line-height:1.65;color:var(--ink);}
.detail-career-path{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:12px 0;}
.detail-path-node{font-family:var(--mono);font-size:9px;letter-spacing:0.04em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--line);background:white;cursor:pointer;transition:all 0.15s ease;}
.detail-path-node:hover{border-color:var(--gold);}
.detail-path-node.current-path{background:var(--gold);border-color:var(--gold);font-weight:500;}
.detail-path-arrow{font-family:var(--mono);font-size:12px;color:var(--gold);}
.detail-path-lateral{font-family:var(--mono);font-size:9px;letter-spacing:0.04em;text-transform:uppercase;padding:6px 10px;border:1px dashed var(--green);background:rgba(26,122,74,0.05);color:var(--green);cursor:pointer;transition:all 0.15s ease;display:inline-block;margin:3px;}
.detail-path-lateral:hover{background:rgba(26,122,74,0.12);}
.detail-sidebar-card{background:white;border:1px solid var(--line);padding:16px;margin-bottom:12px;}
.detail-sidebar-header{font-family:var(--mono);font-size:9px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;margin-bottom:8px;}
.detail-sidebar-value{font-weight:500;font-size:1rem;}
.detail-placeholder{color:var(--muted);font-style:italic;font-size:0.85rem;line-height:1.6;}

/* Detail — skills grid */
.detail-skills-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;}
.detail-skills-col h4{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.detail-skills-col ul{list-style:none;padding:0;}
.detail-skills-col li{font-size:0.82rem;line-height:1.55;color:var(--ink);padding:3px 0;border-bottom:1px solid var(--line);}
.detail-skills-col li:last-child{border-bottom:none;}

/* Detail — day in the life */
.detail-ditl-block{margin-bottom:12px;}
.detail-ditl-label{font-family:var(--mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.detail-ditl-text{font-size:0.85rem;line-height:1.6;color:var(--ink);}

/* Detail — employer tags */
.detail-employer-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.detail-employer-tag{font-family:var(--mono);font-size:9px;letter-spacing:0.04em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);background:white;}

/* Detail — entry paths */
.detail-entry-list{list-style:none;padding:0;margin-top:8px;}
.detail-entry-list li{font-size:0.85rem;line-height:1.55;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line);padding-left:14px;position:relative;}
.detail-entry-list li::before{content:'\2192';position:absolute;left:0;color:var(--gold);}
.detail-entry-list li:last-child{border-bottom:none;}

/* Detail — gated content CTA */
.detail-gated{padding:20px;background:rgba(201,168,76,0.08);border:1px solid rgba(201,168,76,0.15);text-align:center;margin-top:12px;}
.detail-gated p{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.detail-gated a{font-family:var(--mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold);text-decoration:underline;}

/* ── FINN FAB + PANEL ── */
.finn-fab{position:fixed;bottom:28px;right:28px;z-index:200;width:52px;height:52px;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;border-radius:50%;box-shadow:0 4px 20px rgba(201,168,76,0.35);border:none;transition:all 0.2s ease;}
.finn-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(201,168,76,0.5);}
.finn-fab.hidden{display:none;}

.finn-panel{position:fixed;bottom:28px;right:28px;z-index:200;width:380px;max-width:calc(100vw - 40px);height:520px;max-height:calc(100vh - 80px);background:var(--ink);color:var(--cream);display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(15,15,26,0.4);border:1px solid rgba(245,240,232,0.08);transform:scale(0.9) translateY(20px);opacity:0;pointer-events:none;transition:all 0.25s cubic-bezier(0.4,0,0.2,1);transform-origin:bottom right;}
.finn-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all;}

.finn-header{padding:16px 20px;border-bottom:1px solid rgba(245,240,232,0.08);display:flex;align-items:center;justify-content:space-between;}
.finn-header-left{display:flex;align-items:center;gap:10px;}
.finn-avatar{width:32px;height:32px;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink);font-family:var(--serif);}
.finn-header h3{font-family:var(--serif);font-size:16px;font-weight:500;font-style:italic;}
.finn-header-close{color:rgba(245,240,232,0.5);font-size:20px;cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:color 0.15s ease;}
.finn-header-close:hover{color:var(--cream);}

.ai-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;}
.ai-msg{max-width:90%;padding:12px 14px;font-size:0.85rem;line-height:1.55;}
.ai-msg.bot{background:rgba(245,240,232,0.08);color:var(--cream);align-self:flex-start;}
.ai-msg.user{background:var(--gold);color:var(--ink);align-self:flex-end;font-weight:500;}
.ai-msg strong{font-weight:600;}

.ai-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 20px 12px;}
.ai-chip{font-family:var(--mono);font-size:9px;letter-spacing:0.04em;text-transform:uppercase;padding:6px 10px;border:1px solid rgba(245,240,232,0.15);color:rgba(245,240,232,0.7);cursor:pointer;transition:all 0.15s ease;}
.ai-chip:hover{border-color:var(--gold);color:var(--gold);}

.ai-input-row{padding:12px 20px;border-top:1px solid rgba(245,240,232,0.08);display:flex;gap:8px;align-items:flex-end;}
.ai-input{flex:1;background:rgba(245,240,232,0.06);border:1px solid rgba(245,240,232,0.1);color:var(--cream);padding:10px 12px;font-family:var(--sans);font-size:0.85rem;resize:none;outline:none;min-height:40px;max-height:100px;}
.ai-input::placeholder{color:rgba(245,240,232,0.3);}
.ai-input:focus{border-color:var(--gold);}
.ai-send{background:var(--gold);color:var(--ink);width:36px;height:40px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:opacity 0.15s ease;}
.ai-send:hover{opacity:0.85;}
.ai-limit{padding:8px 20px;font-family:var(--mono);font-size:9px;text-align:center;color:rgba(245,240,232,0.3);letter-spacing:0.05em;border-top:1px solid rgba(245,240,232,0.05);}
.ai-limit a{color:var(--gold);text-decoration:underline;}

/* Typing indicator */
.ai-typing{display:flex;gap:4px;padding:12px 14px;align-self:flex-start;}
.ai-typing-dot{width:6px;height:6px;background:rgba(245,240,232,0.3);border-radius:50%;animation:aiTyping 1.4s infinite ease-in-out both;}
.ai-typing-dot:nth-child(1){animation-delay:0s;}
.ai-typing-dot:nth-child(2){animation-delay:0.2s;}
.ai-typing-dot:nth-child(3){animation-delay:0.4s;}
@keyframes aiTyping{
  0%,80%,100%{transform:scale(0.6);opacity:0.4;}
  40%{transform:scale(1);opacity:1;}
}

/* ── COMPLIANCE FOOTER ── */
.compliance{background:var(--ink);color:var(--cream);padding:20px 36px;text-align:center;}
.compliance p{font-family:var(--mono);font-size:9px;font-style:italic;letter-spacing:0.04em;line-height:1.5;opacity:0.5;}

/* ── LOADING STATE ── */
.atlas-loading{padding:60px 36px;text-align:center;}
.atlas-loading-text{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:0.5;}50%{opacity:1;}}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .hero{padding:28px 20px 24px;}
  .hero h1{font-size:30px;}
  .atlas-main{padding:20px 16px 80px;}
  .detail-overlay{width:100vw;}
  .finn-panel{width:calc(100vw - 24px);right:12px;bottom:12px;height:calc(100vh - 80px);}
  .finn-fab{bottom:16px;right:16px;width:48px;height:48px;font-size:20px;}
  .detail-body{padding:20px;}
  .detail-header{padding:28px 20px 20px;}
  .detail-skills-grid{grid-template-columns:1fr;}
}