/* ============================================================
   Signature experiences — ⌘K command palette and Recruiter Mode.
   These two pieces carry the interactive personality of the site.
   ============================================================ */

/* ---------- hero hint bar (⌘K prompt) ---------- */
.hero-hintbar{margin:0 0 1.5rem}
.palette-trigger{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .95rem;border-radius:999px;cursor:pointer;
  background:var(--surface);border:1px dashed var(--border-strong);
  color:var(--text-faint);font-size:.82rem;
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast);
}
.palette-trigger:hover{color:var(--text);border-color:var(--accent);background:var(--surface-2)}
.palette-trigger i{font-size:.75rem;color:var(--accent)}
.palette-trigger kbd{
  font-family:var(--font-mono);font-size:.72rem;line-height:1;
  padding:.2rem .38rem;border-radius:5px;
  background:var(--surface-2);border:1px solid var(--border-strong);
  color:var(--text-dim);
}

/* ============================================================
   2. COMMAND PALETTE
   ============================================================ */

.palette-overlay{
  position:fixed;inset:0;z-index:500;
  display:grid;align-items:start;justify-items:center;
  padding:clamp(56px,12vh,140px) var(--gutter) var(--gutter);
}
.palette-backdrop{
  position:absolute;inset:0;background:rgba(3,8,6,.74);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:fadeIn .2s;
}
.palette{
  position:relative;width:min(620px,100%);
  max-height:min(560px,74vh);display:flex;flex-direction:column;
  border-radius:18px;overflow:hidden;
  background:color-mix(in srgb,var(--bg-alt) 96%,transparent);
  border:1px solid var(--border-strong);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  animation:paletteIn .26s var(--ease-out);
}
@keyframes paletteIn{from{opacity:0;transform:translateY(-14px) scale(.97)}}

.palette-input-row{
  display:flex;align-items:center;gap:.75rem;
  padding:1rem 1.1rem;border-bottom:1px solid var(--border);
}
.palette-input-row > i{color:var(--text-faint);font-size:.95rem}
.palette-input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--text);font-family:var(--font-body);font-size:1rem;
}
.palette-input::placeholder{color:var(--text-faint)}
.palette-kbd,.palette-foot kbd{
  font-family:var(--font-mono);font-size:.7rem;line-height:1;
  padding:.25rem .42rem;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text-faint);
}

.palette-list{flex:1;overflow-y:auto;padding:.45rem}
.palette-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.62rem .7rem;border-radius:11px;cursor:pointer;
  transition:background var(--dur-fast);
}
.palette-item.is-active{background:var(--accent-soft)}
.palette-ico{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  background:var(--surface-2);color:var(--accent);font-size:.82rem;
}
.palette-item.is-active .palette-ico{background:var(--accent);color:#04140d}
.palette-label{
  flex:1;min-width:0;display:flex;flex-direction:column;
  font-size:.93rem;font-weight:500;line-height:1.35;
}
.palette-hint{font-size:.76rem;color:var(--text-faint);font-weight:400}
.palette-group{
  flex:none;font-family:var(--font-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);
}
.palette-empty{padding:1.6rem;text-align:center;color:var(--text-faint);font-size:.9rem}

.palette-foot{
  display:flex;flex-wrap:wrap;gap:1rem;
  padding:.6rem 1.1rem;border-top:1px solid var(--border);
  background:var(--surface);
  font-size:.74rem;color:var(--text-faint);
}
.palette-foot span{display:inline-flex;align-items:center;gap:.3rem}

/* ============================================================
   3. RECRUITER MODE
   ============================================================ */

.recruiter-overlay{
  position:fixed;inset:0;z-index:520;overflow-y:auto;
  padding:var(--gutter);
  background:rgba(3,8,6,.84);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:fadeIn .22s;
}
.recruiter-sheet{
  width:min(880px,100%);margin:0 auto;
  border-radius:22px;padding:1.7rem;
  background:var(--bg-alt);border:1px solid var(--border-strong);
  box-shadow:0 40px 100px -35px rgba(0,0,0,.85);
  animation:popIn .3s var(--ease-out);
}

.rec-head{
  display:flex;align-items:flex-start;gap:1rem;
  padding-bottom:1.2rem;margin-bottom:1.3rem;
  border-bottom:1px solid var(--border);
}
.rec-id{display:flex;align-items:center;gap:1rem;min-width:0;flex:1}
.rec-photo{
  width:72px;height:72px;border-radius:18px;flex:none;
  object-fit:cover;object-position:center 15%;
  border:2px solid var(--accent);box-shadow:0 0 0 5px var(--accent-soft);
}
.rec-eyebrow{
  margin:0 0 .15rem;font-family:var(--font-mono);font-size:.72rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--accent);
}
.rec-head h2{font-size:clamp(1.3rem,3.4vw,1.75rem)}
.rec-role{margin:.2rem 0 0;color:var(--text-dim);font-size:.9rem}

.rec-block{margin-bottom:1.5rem}
.rec-block h3{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
  font-family:var(--font-mono);color:var(--text-faint);margin-bottom:.85rem;
}
.rec-count{
  font-size:.68rem;letter-spacing:.05em;padding:.15rem .5rem;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
}

/* facts */
.rec-facts{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.rec-facts li{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.7rem .85rem;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);
}
.rec-fact-ico{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none;
  background:var(--accent-soft);color:var(--accent);font-size:.78rem;
}
.rec-facts li > span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.rec-facts strong{font-size:.73rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:600}
.rec-facts strong + span{font-size:.88rem;color:var(--text)}

/* skills */
.rec-skills{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.4rem}
.rec-skill{display:grid;gap:.32rem}
.rec-skill-name{font-size:.85rem;color:var(--text-dim);font-weight:500}
.rec-skill-track{display:block;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.rec-skill-fill{display:block;height:100%;border-radius:99px;background:var(--grad)}

/* projects */
.rec-projects{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.rec-projects li{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.8rem .9rem;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);
}
.rec-proj-ico{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:none;
  background:var(--accent-soft);color:var(--accent);font-size:.9rem;
}
.rec-proj-body{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.rec-proj-body strong{font-size:.93rem}
.rec-proj-tag{font-size:.8rem;color:var(--text-dim)}
.rec-proj-tech{
  font-family:var(--font-mono);font-size:.72rem;color:var(--text-faint);margin-top:.2rem;
}

.rec-cta{
  display:flex;flex-wrap:wrap;gap:.7rem;
  padding-top:1.2rem;border-top:1px solid var(--border);
}

/* ---------- navbar additions ---------- */
.nav-recruiter{box-shadow:0 8px 24px -10px var(--glow-green)}

/* ============================================================
   RESPONSIVE — the phone layout is the priority here
   ============================================================ */

@media (max-width:1024px){
  .nav-palette{display:none}
}

@media (max-width:820px){
  .rec-facts,.rec-skills,.rec-projects{grid-template-columns:1fr}
  .recruiter-sheet{padding:1.2rem;border-radius:18px}
  .palette-foot{display:none}
  .palette-group{display:none}
}

@media (max-width:480px){
  /* Keep the nav to one tidy row: icon-only Recruiter Mode trigger. */
  .nav-recruiter{width:42px;height:42px;padding:0;border-radius:12px}
  .nav-recruiter span{display:none}

  .palette-overlay{padding:64px 14px 14px}
  .palette{max-height:78vh}
  .rec-photo{width:58px;height:58px;border-radius:15px}
  .rec-cta .btn{width:100%}
}