/* =====================================================================
 * features.css : styles for the interactive additions
 * (command palette, Ask Matt, skills search, live
 * contact extras, print)
 * Tokens come from colors_and_type.css.
 * =====================================================================*/

/* ---------- scroll progress + nav ---------- */
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;background:linear-gradient(90deg,var(--p-primary),var(--p-ai),var(--p-accent));box-shadow:0 0 12px var(--p-primary-glow);transition:width .08s linear;}
.navlink.active{color:var(--fg-strong);}
.navlink{position:relative;}
.navlink.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--p-primary);border-radius:2px;}
.nav-k{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);background:var(--bg-glass);color:var(--fg-muted);font-family:var(--ff-mono);font-size:12px;letter-spacing:.08em;cursor:pointer;transition:border-color .2s,color .2s;}
.nav-k:hover{color:var(--fg-strong);border-color:var(--p-primary);}
.nav-k kbd{font:inherit;font-size:10.5px;padding:1px 5px;border-radius:5px;border:1px solid var(--border-ghost);background:var(--bg-elev-2);color:var(--fg-subtle);}
@media (max-width:880px){.nav-k .nav-k-txt{display:none;}}

/* ---------- hero stat count-up ---------- */
[data-count]{font-variant-numeric:tabular-nums;}

/* ---------- skills search ---------- */
.skill-search{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-16px 0 24px;}
.skill-search .in{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);background:var(--bg-elev-1);}
.skill-search input{flex:1;background:none;border:0;outline:0;color:var(--fg-strong);font:inherit;font-size:14px;}
.skill-search input::placeholder{color:var(--fg-subtle);}
.skill-search .cnt{font-family:var(--ff-mono);font-size:12px;letter-spacing:.1em;color:var(--fg-subtle);}
.skill-search .quick{display:flex;gap:6px;flex-wrap:wrap;}
.skill-search .quick button{padding:5px 11px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);background:transparent;color:var(--fg-muted);font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.08em;cursor:pointer;}
.skill-search .quick button:hover{color:var(--fg-strong);border-color:var(--p-primary);}
#skills .chip{transition:opacity .2s,background .2s,color .2s,box-shadow .2s;}
#skills.filtering .chip{opacity:.28;}
#skills.filtering .chip.hit{opacity:1;background:var(--p-primary-soft)!important;color:var(--fg-strong)!important;box-shadow:0 0 0 1px var(--p-primary);}
#skills.filtering .glass.nohit{opacity:.35;}
#skills .chip mark{background:transparent;color:var(--p-primary);font-weight:700;}

/* ---------- certifications: verify links ---------- */
.cert-link{transition:transform .18s var(--ease),border-color .2s;cursor:pointer;}
.cert-link:hover{transform:translateY(-2px);border-color:var(--p-primary)!important;}
.verify{margin-top:4px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.12em;color:var(--p-primary);}
.cert-link[data-verify-todo] .verify{color:var(--fg-subtle);}

/* ---------- contact extras ---------- */
.contact-extra{margin-top:34px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;justify-content:center;max-width:620px;margin-left:auto;margin-right:auto;text-align:left;}
.qr{width:176px;height:176px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--border-ghost);}
.qr svg{width:100%;height:100%;display:block;}
.contact-extra .h{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.16em;color:var(--p-primary);}
.contact-extra .p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--fg-muted);}
.contact-extra .row{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;}
.btn-mini{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);background:var(--bg-elev-2);color:var(--fg-default);font:inherit;font-size:12.5px;cursor:pointer;transition:border-color .2s,transform .15s;}
.btn-mini:hover{border-color:var(--p-primary);transform:translateY(-1px);}
@media (max-width:560px){.contact-extra{grid-template-columns:1fr;justify-items:center;text-align:center;}.contact-extra .row{justify-content:center;}}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;z-index:80;padding:10px 16px;border-radius:var(--radius-full);background:var(--bg-elev-2);border:1px solid var(--p-primary);color:var(--fg-strong);font-size:13.5px;box-shadow:var(--shadow-float);transition:opacity .25s,transform .25s;pointer-events:none;}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- footer: built with ---------- */
.built{margin-top:26px;padding:16px 18px;border-radius:14px;border:1px solid var(--border-ghost);background:var(--bg-elev-1);display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.08em;color:var(--fg-subtle);}
.built b{color:var(--fg-muted);font-weight:600;}
.built a{color:var(--fg-muted);border-bottom:1px dotted var(--fg-subtle);}
.built a:hover{color:var(--p-primary);border-color:var(--p-primary);}

/* ---------- command palette ---------- */
.cmdk{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 0;background:rgba(5,4,12,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.cmdk.on{display:flex;}
.cmdk-box{width:100%;max-width:600px;border-radius:18px;background:var(--bg-elev-1);border:1px solid var(--border-ghost);box-shadow:var(--shadow-float);overflow:hidden;animation:rv .22s var(--ease-out) both;}
.cmdk-in{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border-ghost);}
.cmdk-in input{flex:1;background:none;border:0;outline:0;color:var(--fg-strong);font:inherit;font-size:16px;}
.cmdk-in kbd{font-family:var(--ff-mono);font-size:10.5px;padding:2px 6px;border-radius:5px;border:1px solid var(--border-ghost);color:var(--fg-subtle);}
.cmdk-list{max-height:min(420px,56vh);overflow:auto;padding:8px;}
.cmdk-g{padding:8px 10px 4px;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;color:var(--fg-subtle);}
.cmdk-it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--fg-default);font-size:14px;}
.cmdk-it .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--bg-elev-2);font-family:var(--ff-mono);font-size:11px;color:var(--p-primary);flex:none;}
.cmdk-it .sub{margin-left:auto;font-family:var(--ff-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-subtle);}
.cmdk-it.sel,.cmdk-it:hover{background:var(--p-primary-soft);color:var(--fg-strong);}
.cmdk-empty{padding:22px;text-align:center;color:var(--fg-subtle);font-size:13.5px;}

/* ---------- Ask Matt ---------- */
.ask-fab{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:var(--radius-full);border:1px solid color-mix(in oklab,var(--p-primary) 55%,transparent);background:linear-gradient(140deg,color-mix(in oklab,var(--p-primary) 30%,var(--bg-elev-1)),var(--bg-elev-1));color:var(--fg-strong);font:inherit;font-weight:600;font-size:14px;cursor:pointer;box-shadow:var(--shadow-float);transition:transform .18s var(--ease);}
.ask-fab:hover{transform:translateY(-2px);}
.ask-fab .dot{animation:pulse 2.4s ease-in-out infinite;}
.ask{position:fixed;right:22px;bottom:22px;z-index:90;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 60px));display:none;flex-direction:column;border-radius:20px;background:var(--bg-elev-1);border:1px solid var(--border-ghost);box-shadow:var(--shadow-float);overflow:hidden;animation:rv .25s var(--ease-out) both;}
.ask.on{display:flex;}
.ask-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-ghost);}
.ask-hd .t{font-family:var(--ff-display);font-weight:800;font-size:16px;color:var(--fg-strong);}
.ask-hd .mode{margin-left:auto;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.12em;padding:3px 8px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);color:var(--fg-subtle);}
.ask-hd .mode.live{color:var(--p-primary);border-color:var(--p-primary);}
.ask-hd .x{background:none;border:0;color:var(--fg-subtle);font-size:20px;cursor:pointer;line-height:1;}
.ask-msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;}
.msg.u{align-self:flex-end;background:var(--p-primary-soft);color:var(--fg-strong);border-bottom-right-radius:4px;}
.msg.a{align-self:flex-start;background:var(--bg-elev-2);color:var(--fg-default);border-bottom-left-radius:4px;}
.msg.a.think{color:var(--fg-subtle);font-family:var(--ff-mono);font-size:12.5px;}
.ask-sugg{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;}
.ask-sugg button{padding:6px 11px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);background:transparent;color:var(--fg-muted);font:inherit;font-size:12.5px;cursor:pointer;}
.ask-sugg button:hover{border-color:var(--p-primary);color:var(--fg-strong);}
.ask-in{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border-ghost);}
.ask-in input{flex:1;padding:10px 14px;border-radius:var(--radius-full);border:1px solid var(--border-ghost);background:var(--bg-elev-2);color:var(--fg-strong);font:inherit;font-size:14px;outline:0;}
.ask-in input:focus{border-color:var(--p-primary);}
.ask-in button{padding:10px 16px;border-radius:var(--radius-full);border:0;background:var(--p-primary);color:#0a0815;font:inherit;font-weight:700;cursor:pointer;}
.ask-foot{padding:0 14px 10px;font-size:11px;color:var(--fg-subtle);text-align:center;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .dot,.ask-fab .dot{animation:none;}
  .cmdk-box,.ask{animation:none;}
  .meter i{transition:none;}
}

/* ---------- print: a print-friendly résumé (black on white, no chrome) ---------- */
@media print{
  @page{margin:12mm 14mm;}
  html,body,#site-root{background:#fff!important;color:#111!important;}
  /* universal reset: browsers drop backgrounds by default, so make every colour explicit */
  #site-root *{background:transparent!important;background-image:none!important;color:#111!important;box-shadow:none!important;text-shadow:none!important;border-color:#c9c9d0!important;-webkit-text-fill-color:#111!important;animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  #site-root > div[style*="position:absolute"],#site-root > div[style*="position: absolute"],#site-root svg[aria-hidden],
  nav,#scroll-progress,.ask-fab,.ask,.cmdk,.toast,.hs-ring,.hs-float,.heroA-visual,.skill-search,.built,.contact-extra,
  .pcarousel-frame,#thumbs,#screen-label,#screen-cap,.appstore-btn,.verify,[data-print="hide"],.btn-pill{display:none!important;}
  #site-root{font-size:10.5pt;line-height:1.4;}
  section,header{padding:6mm 0 0!important;max-width:none!important;}
  header#heroA{grid-template-columns:1fr!important;padding-top:0!important;gap:0!important;}
  h1{font-size:26pt!important;line-height:1!important;margin:4mm 0 0!important;}
  h2{font-size:15pt!important;margin-top:3mm!important;}
  p{margin-top:2mm!important;}
  .glass{border:1px solid #d5d5dc!important;border-radius:6px!important;padding:3mm 4mm!important;break-inside:avoid;}
  .grid2{gap:3mm!important;}
  .fw-grid{grid-template-columns:repeat(2,1fr)!important;gap:2mm!important;}
  #skills .chip{padding:1px 6px!important;border:1px solid #d5d5dc!important;font-size:8.5pt!important;}
  .fw-tag{border:1px solid #bbb!important;}
  .co-logo{box-shadow:none!important;border:1px solid #ddd!important;}
  #contact>div:first-child{padding:4mm!important;border:1px solid #d5d5dc!important;border-radius:6px!important;}
  a[href^="http"]:not(.cert-link)::after{content:" (" attr(href) ")";font-size:8pt;color:#555!important;}
  a[href^="mailto:"]::after{content:" matt.aaron.james@gmail.com";font-size:9pt;}
}