/* Small, accessible three-era navigation shared by Latest, V1 and V2.
   Intentionally scoped: archived Tailwind and current Portfolio CSS stay intact. */
#portfolio-version-switcher {
  position:fixed; right:18px; top:97px; z-index:70;
  width:fit-content; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  padding:12px 13px 11px; border-radius:16px;
  border:1px solid rgba(185,248,225,.28);
  background:rgba(8,18,28,.91); color:#e9fff6;
  box-shadow:0 12px 36px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  font:600 11px/1.4 system-ui,-apple-system,"Anuphan",sans-serif;
  letter-spacing:normal; isolation:isolate; box-sizing:border-box;
}
#portfolio-version-switcher * { box-sizing:border-box; }
#portfolio-version-switcher .version-label {
  display:flex; align-items:center; gap:7px;
  color:#a9dbc9; font-size:9px; font-weight:750;
  letter-spacing:.13em; text-transform:uppercase;
}
#portfolio-version-switcher .version-label::before {
  content:""; width:6px; height:6px; background:#b5f6db; border-radius:50%;
  box-shadow:0 0 0 3px rgba(181,246,219,.1);
}
#portfolio-version-switcher .version-links {
  display:flex; gap:3px; align-items:center;
  padding:3px; border-radius:11px; background:rgba(255,255,255,.07);
}
#portfolio-version-switcher a {
  display:inline-flex; justify-content:center; align-items:center;
  min-width:48px; min-height:30px; padding:6px 12px;
  border:0; border-radius:8px; color:#d5e4e7;
  background:transparent; text-decoration:none;
  font:750 11px/1.2 system-ui,-apple-system,"Anuphan",sans-serif;
  white-space:nowrap; transition:background .18s,color .18s;
}
#portfolio-version-switcher a:hover {
  background:rgba(181,246,219,.13); color:#fff;
}
#portfolio-version-switcher a[aria-current="page"] {
  background:#b5f6db; color:#0a1a20; pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,.17);
}
#portfolio-version-switcher a:focus-visible {
  outline:2px solid #d3fff0;outline-offset:3px;
}
#portfolio-version-switcher .version-hint {
  color:#c9d8d6; font-size:10px; font-weight:500;
  opacity:.85; margin:0;
}
@media(max-width:520px) {
  #portfolio-version-switcher {
    right:10px; top:94px;
    padding:6px; gap:0; border-radius:12px;
  }
  #portfolio-version-switcher a {min-width:43px;min-height:30px;padding:5px 9px}
  /* Latest homepage tools are part of the hero, not permanent overlays. */
  .page-home > .site-header + #portfolio-version-switcher {
    position:absolute;
  }
  #portfolio-version-switcher .version-label,
  #portfolio-version-switcher .version-hint {display:none}
}
@media(prefers-reduced-motion:reduce) {
  #portfolio-version-switcher a { transition:none; }
}
@media print {#portfolio-version-switcher {display:none!important}}

/* Mobile version selector is a single accessible dropdown trigger. */
#portfolio-version-switcher .version-mobile-toggle {display:none}
@media(max-width:690px) {
  #portfolio-version-switcher {
    position:fixed;
    inset:81px 18px auto auto;
    width:auto;
    max-width:calc(100vw - 36px);
    margin:0;
    padding:4px;
    gap:0;
    z-index:20;
    border-radius:14px;
    background:rgba(10,20,33,.84);
    border-color:rgba(181,246,219,.26);
    box-shadow:0 10px 25px rgba(3,8,20,.23);
  }
  #portfolio-version-switcher .version-label,
  #portfolio-version-switcher .version-hint {display:none}
  #portfolio-version-switcher .version-mobile-toggle {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    min-width:96px;
    height:38px;
    padding:0 11px;
    border:0;
    border-radius:10px;
    background:rgba(181,246,219,.11);
    color:#ddfff1;
    font:750 12px/1.2 system-ui,-apple-system,"Anuphan",sans-serif;
    cursor:pointer;
  }
  #portfolio-version-switcher .version-mobile-toggle:focus-visible {
    outline:2px solid #b5f6db;outline-offset:2px;
  }
  #portfolio-version-switcher .version-mobile-chevron {
    color:#b5f6db;
    font-size:17px;
    line-height:1;
    transform-origin:center;
    transition:transform .2s;
  }
  #portfolio-version-switcher.is-open .version-mobile-chevron {
    transform:rotate(180deg);
  }
  #portfolio-version-switcher .version-links {display:none}
  #portfolio-version-switcher.is-open .version-links {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    position:absolute;
    top:calc(100% + 7px);
    right:0;
    min-width:150px;
    padding:5px;
    gap:3px;
    border:1px solid rgba(181,246,219,.28);
    border-radius:12px;
    background:rgba(10,20,33,.98);
    box-shadow:0 14px 34px rgba(0,0,0,.4);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }
  #portfolio-version-switcher.is-open .version-links a {
    justify-content:flex-start;
    min-height:40px;
    padding:10px 14px;
    border-radius:8px;
  }
}
@media(max-width:360px) {
  #portfolio-version-switcher {inset:78px 12px auto auto}
  #portfolio-version-switcher .version-mobile-toggle {min-width:86px}
}
@media(prefers-reduced-motion:reduce) {
  #portfolio-version-switcher .version-mobile-chevron {transition:none}
}