/* ==========================================================================
   ADDONS.CSS — theme toggle, command palette, custom cursor, skip-link,
   breadcrumb, reading-time badge, security checklist, arch-node detail
   panel, testimonial cards, now-banner, stat counters, code-copy button,
   ambient particles canvas, sound toggle, GitHub badge, QR block.
   Loaded after mobile.css.
   ========================================================================== */

/* ---- Hamburger → X animation on open (driven by aria-expanded) -------- */
.navtoggle{position:relative;}
.navtoggle span{transform-origin:center;}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- Skip-to-content link (accessibility) ------------------------------ */
.skip-link{
  position:fixed;
  top:-60px;left:16px;
  z-index:200;
  background:var(--amber);
  color:var(--on-accent);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  font-weight:600;
  padding:10px 16px;
  border-radius:var(--radius-s);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{top:calc(var(--chrome-h) + 10px);}

/* ---- Theme toggle button (injected into navbar by theme.js) ----------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-hi);
  font-size:var(--fs-16);
  cursor:pointer;
  margin-inline-end:6px;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.theme-toggle:hover{border-color:var(--amber);color:var(--amber);}
.theme-toggle:active{transform:scale(.94);}

/* ---- Sound toggle button (injected next to theme toggle) -------------- */
.sound-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-lo);
  font-size:var(--fs-14);
  cursor:pointer;
  margin-inline-end:6px;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sound-toggle.is-on{color:var(--teal);border-color:var(--teal);}
.sound-toggle:active{transform:scale(.94);}

/* ---- Command palette trigger + modal (Ctrl+K) -------------------------- */
.cmdk-trigger{
  display:inline-flex;align-items:center;gap:6px;
  width:36px;height:36px;justify-content:center;
  border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:transparent;
  color:var(--text-lo);
  cursor:pointer;
  margin-inline-end:6px;
  font-family:var(--font-mono);
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cmdk-trigger:hover{border-color:var(--amber);color:var(--amber);}

.cmdk-overlay{
  position:fixed;inset:0;
  background:rgba(10,12,17,.72);
  backdrop-filter:blur(2px);
  z-index:210;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:12vh;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease);
}
.cmdk-overlay.is-open{opacity:1;pointer-events:auto;}
.cmdk-box{
  width:min(560px, 92vw);
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  overflow:hidden;
  transform:translateY(-8px);
  transition:transform var(--dur-fast) var(--ease);
}
.cmdk-overlay.is-open .cmdk-box{transform:translateY(0);}
.cmdk-input{
  width:100%;
  padding:16px 18px;
  background:var(--ink-900);
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--text-hi);
  font-family:var(--font-mono);
  font-size:var(--fs-16);
}
.cmdk-input:focus{outline:none;}
.cmdk-list{max-height:50vh;overflow-y:auto;}
.cmdk-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:var(--fs-14);
  color:var(--text-md);
  border-left:2px solid transparent;
}
.cmdk-item i{color:var(--text-lo);font-style:normal;font-size:var(--fs-12);width:24px;}
.cmdk-item.is-active{background:var(--ink-700);color:var(--text-hi);border-left-color:var(--amber);}
.cmdk-empty{padding:18px;color:var(--text-lo);font-size:var(--fs-14);text-align:center;}
.cmdk-hint{
  padding:10px 18px;
  border-top:1px solid var(--line-soft);
  color:var(--text-lo);
  font-size:var(--fs-10);
  font-family:var(--font-mono);
}
.cmdk-hint kbd{
  background:var(--ink-700);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1px 5px;
  margin-inline-end:2px;
}

/* ---- Custom cursor (desktop / precise pointer only) -------------------- */
@media (hover:hover) and (pointer:fine){
  .cursor-dot{
    position:fixed;
    top:0;left:0;
    width:8px;height:8px;
    border-radius:50%;
    background:var(--amber);
    pointer-events:none;
    z-index:220;
    transform:translate(-50%,-50%);
    transition:width var(--dur-fast) var(--ease), height var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
    mix-blend-mode:difference;
  }
  .cursor-dot.is-hover{width:26px;height:26px;background:var(--teal);}
}

/* ---- Hero: positioning context so ambient particles sit behind copy ---- */
.hero{position:relative;overflow:hidden;}
.hero__copy,.hero__panel{position:relative;z-index:1;}

/* ---- Ambient dust particles behind the hero ---------------------------- */
.hero-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.hero-particles canvas{width:100%;height:100%;display:block;}

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  color:var(--text-lo);
  margin-bottom:18px;
}
.breadcrumb a{color:var(--text-md);}
.breadcrumb a:hover{color:var(--amber);}
.breadcrumb span{color:var(--text-lo);}
.breadcrumb b{color:var(--text-hi);font-weight:500;}

/* ---- Reading-time / meta badge ------------------------------------------ */
.read-meta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  color:var(--text-lo);
  margin-top:8px;
}
.read-meta span + span::before{content:"·";margin-inline-end:10px;color:var(--line);}

/* ---- Reading progress bar (long-form post pages) ------------------------ */
.read-progress{
  position:fixed;
  top:calc(var(--chrome-h) + var(--navbar-h));
  left:0;
  height:3px;
  width:0%;
  background:var(--amber);
  z-index:65;
  transition:width .1s linear;
}

/* ---- Code block copy button --------------------------------------------- */
.code-block{position:relative;}
.code-copy{
  position:absolute;
  top:10px;right:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-10);
  color:var(--text-lo);
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  padding:5px 10px;
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.code-copy:hover{color:var(--amber);border-color:var(--amber);}
.code-copy.is-copied{color:var(--green);border-color:var(--green);}

/* ---- Security practices checklist --------------------------------------- */
.check-list{display:grid;gap:12px;}
.check-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  background:var(--ink-800);
}
.check-item .mark{
  flex:0 0 auto;
  width:20px;height:20px;
  border-radius:5px;
  background:var(--teal-dim);
  color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-12);
  margin-top:1px;
}
.check-item h4{font-size:var(--fs-14);margin-bottom:3px;}
.check-item p{font-size:var(--fs-12);color:var(--text-md);}

/* ---- Architecture diagram: clickable nodes + detail panel --------------- */
.arch-node{cursor:pointer;transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);}
.arch-node:hover,.arch-node.is-active{border-color:var(--amber);background:var(--amber-dim);}
.arch-detail{
  margin-top:14px;
  padding:16px 18px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  background:var(--ink-800);
  font-size:var(--fs-14);
  color:var(--text-md);
  display:none;
}
.arch-detail.is-open{display:block;}
.arch-detail b{color:var(--text-hi);}

/* ---- Now-banner (about / index) ----------------------------------------- */
.now-banner{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 20px;
  border:1px solid var(--teal-dim);
  border-left:3px solid var(--teal);
  border-radius:var(--radius-m);
  background:var(--ink-800);
  margin-top:22px;
}
.now-banner .dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  background:var(--teal);margin-top:7px;
  box-shadow:0 0 0 4px var(--teal-dim);
}
.now-banner h4{font-size:var(--fs-14);margin-bottom:4px;}
.now-banner p{font-size:var(--fs-13,var(--fs-14));color:var(--text-md);}
.now-banner time{display:block;margin-top:6px;font-family:var(--font-mono);font-size:var(--fs-10);color:var(--text-lo);}

/* ---- Testimonial cards --------------------------------------------------- */
.testimonial-card{
  padding:22px 24px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  background:var(--ink-800);
}
.testimonial-card p{font-size:var(--fs-14);color:var(--text-md);line-height:1.7;}
.testimonial-card p::before{content:"“";color:var(--amber);font-size:var(--fs-22);line-height:0;position:relative;top:6px;margin-inline-end:2px;}
.testimonial-card__who{display:flex;align-items:center;gap:10px;margin-top:16px;}
.testimonial-card__avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--amber-dim);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:var(--fs-12);font-weight:600;
}
.testimonial-card__name{font-size:var(--fs-12);font-weight:600;color:var(--text-hi);}
.testimonial-card__role{font-size:var(--fs-10);color:var(--text-lo);}
.testimonial-note{
  font-size:var(--fs-10);
  color:var(--text-lo);
  font-family:var(--font-mono);
  margin-top:10px;
  opacity:.75;
}

/* ---- Stat counters (index hero) ------------------------------------------ */
.stat-row{display:flex;flex-wrap:wrap;gap:28px;margin-top:26px;}
.stat-row .stat{font-family:var(--font-mono);}
.stat-row .stat b{display:block;font-size:var(--fs-28);color:var(--amber);line-height:1;}
.stat-row .stat span{display:block;margin-top:4px;font-size:var(--fs-10);color:var(--text-lo);letter-spacing:.04em;}

/* ---- GitHub stats embed + badge row -------------------------------------- */
.github-card{
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--ink-800);
  padding:6px;
}
.github-card img{width:100%;display:block;border-radius:calc(var(--radius-m) - 4px);}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.badge-row img{height:20px;display:block;}

/* ---- QR block (contact page) --------------------------------------------- */
.qr-block{
  display:flex;align-items:center;gap:16px;
  margin-top:22px;
  padding:16px 18px;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  background:var(--ink-800);
}
.qr-block img{width:88px;height:88px;border-radius:8px;background:#fff;padding:6px;}
.qr-block p{font-size:var(--fs-12);color:var(--text-md);}
.qr-block b{color:var(--text-hi);font-size:var(--fs-14);display:block;margin-bottom:4px;}

/* ---- Floating contact button (WA/Telegram) -------------------------------- */
.float-contact{
  position:fixed;
  left:16px;
  bottom:calc(var(--statusbar-h) + 16px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px 11px 12px;
  border-radius:999px;
  background:var(--teal);
  color:var(--on-accent);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  font-weight:600;
  box-shadow:0 12px 26px -8px rgba(0,0,0,.5);
  z-index:57;
  transition:transform var(--dur-fast) var(--ease);
}
.float-contact:hover{transform:translateY(-2px);}
.float-contact:active{transform:scale(.96);}
.float-contact svg{width:18px;height:18px;flex:0 0 auto;}

/* ---- Language toggle ------------------------------------------------------ */
.lang-toggle{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:var(--radius-s);
  overflow:hidden;
  margin-inline-end:6px;
  font-family:var(--font-mono);
  font-size:var(--fs-10);
}
.lang-toggle button{
  padding:8px 9px;
  background:transparent;
  color:var(--text-lo);
  cursor:pointer;
}
.lang-toggle button.is-active{background:var(--amber);color:var(--on-accent);}

/* ---- Konami-code easter egg toast ----------------------------------------- */
.egg-toast{
  position:fixed;
  left:50%;
  bottom:-80px;
  transform:translateX(-50%);
  background:var(--ink-800);
  border:1px solid var(--amber);
  color:var(--text-hi);
  font-family:var(--font-mono);
  font-size:var(--fs-12);
  padding:14px 20px;
  border-radius:var(--radius-m);
  box-shadow:0 20px 40px -12px rgba(0,0,0,.6);
  z-index:230;
  transition:bottom var(--dur-med) var(--ease);
}
.egg-toast.is-visible{bottom:24px;}

/* ---- 404 page ------------------------------------------------------------- */
.error-page{
  min-height:70vh;
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
}
.error-page .code{
  font-family:var(--font-mono);
  color:var(--amber);
  font-size:var(--fs-14);
  margin-bottom:10px;
}

@media (max-width:640px){
  .float-contact span{display:none;}
  .float-contact{padding:13px;border-radius:50%;}
}