/* ============================================================
   Rationale annotations — the "for Amit only" layer.
   Small numbered ⓘ pins placed inline next to a decision; click
   to read WHY that choice was made (which advisor, what tension).
   A floating toggle shows/hides the whole layer. This layer is
   STRIPPED before anything ships to the live noonfox.com — it
   exists only on the exploration site.
   ============================================================ */

:root{
  --anno:#C8552D;            /* fox russet — matches the live site accent */
  --anno-ink:#2A1D13;
  --anno-paper:#FFFDF9;
  --anno-line:rgba(42,29,19,.16);
}

/* the inline pin */
.why{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;min-width:20px;margin:0 .18em;padding:0;
  border-radius:50%;border:1.5px solid var(--anno);
  background:var(--anno);color:#fff;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:0;cursor:pointer;vertical-align:middle;
  transform:translateY(-1px);transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 4px rgba(200,85,45,.4);
  -webkit-tap-highlight-color:transparent;
}
.why:hover{transform:translateY(-2px) scale(1.08)}
.why:focus-visible{outline:2px solid var(--anno-ink);outline-offset:2px}
.why.open{background:var(--anno-ink);border-color:var(--anno-ink)}

/* hidden state — whole layer off */
body.anno-off .why{display:none}

/* the popover */
.anno-pop{
  position:absolute;z-index:9998;max-width:340px;width:max-content;
  background:var(--anno-paper);color:var(--anno-ink);
  border:1px solid var(--anno-line);border-left:4px solid var(--anno);
  border-radius:12px;padding:15px 17px 16px;
  box-shadow:0 18px 50px -16px rgba(42,29,19,.55), 0 2px 8px rgba(42,29,19,.1);
  font:400 14.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  animation:annoIn .14s ease;
}
@keyframes annoIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.anno-pop .lbl{
  display:block;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--anno);margin-bottom:7px;
}
.anno-pop strong{font-weight:650}
.anno-pop em{color:#7a5c48;font-style:italic}

/* floating master toggle */
.anno-toggle{
  position:fixed;right:16px;bottom:16px;z-index:9999;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--anno-ink);color:#fff;border:none;cursor:pointer;
  padding:11px 15px;border-radius:999px;
  font:600 12.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  box-shadow:0 10px 30px -8px rgba(42,29,19,.6);
  -webkit-tap-highlight-color:transparent;
}
.anno-toggle .sw{
  width:30px;height:18px;border-radius:999px;background:var(--anno);
  position:relative;transition:background .15s ease;flex:0 0 auto;
}
.anno-toggle .sw::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .15s ease;
}
body.anno-off .anno-toggle .sw{background:#6b5847}
body.anno-off .anno-toggle .sw::after{transform:translateX(12px)}

/* the internal banner */
.anno-banner{
  background:repeating-linear-gradient(135deg,#2A1D13,#2A1D13 12px,#341f10 12px,#341f10 24px);
  color:#FFE9DB;text-align:center;
  font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.03em;padding:8px 16px;
}
.anno-banner b{color:#fff}
body.anno-off .anno-banner{opacity:.5}

@media (prefers-reduced-motion: reduce){
  .why,.anno-pop,.anno-toggle .sw,.anno-toggle .sw::after{transition:none;animation:none}
}