/* ════════════════════════════════════════════════════════════════
   WINR v23 — Settings + Theme picker polish
   Notion Week 2: "Settings + Theme picker — verify all 11 skins"

   Loads after _v16_settings.css to override safely. Brand-monochrome
   aware — Tony retokenized --orange to #FFFFFF, so primary accents
   use explicit white where contrast matters.
   ════════════════════════════════════════════════════════════════ */

/* ── Settings page entrance ──────────────────────────────────── */
.v16-settings .v16-main{
  animation:v16FadeIn 380ms cubic-bezier(0.22, 1, 0.36, 1) both
}
@keyframes v16FadeIn{
  from { opacity:0; transform:translateY(8px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ── Sidebar nav — active indicator ──────────────────────────── */
.v16-settings .v16-side-link{
  position:relative;
  transition:background var(--duration) ease,
             color var(--duration) ease,
             transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
             padding-left 240ms cubic-bezier(0.22, 1, 0.36, 1)
}
.v16-settings .v16-side-link::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%) scaleY(0);
  width:3px;
  height:60%;
  background:#FFFFFF;
  border-radius:0 3px 3px 0;
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             opacity 280ms ease;
  opacity:0
}
.v16-settings .v16-side-link.active::before{
  transform:translateY(-50%) scaleY(1);
  opacity:1
}
.v16-settings .v16-side-link.active{
  padding-left:18px
}
.v16-settings .v16-side-link:hover:not(.active){
  transform:translateX(2px)
}

/* ── Card entrance stagger ───────────────────────────────────── */
.v16-settings .v16-card{
  animation:v16CardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both
}
.v16-settings .v16-card:nth-child(1) { animation-delay:60ms }
.v16-settings .v16-card:nth-child(2) { animation-delay:140ms }
.v16-settings .v16-card:nth-child(3) { animation-delay:220ms }
.v16-settings .v16-card:nth-child(n+4) { animation-delay:300ms }
@keyframes v16CardIn{
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0) }
}

/* ── Form inputs — focus glow (subtle) ───────────────────────── */
.v16-settings .v16-input:focus,
.v16-settings .v16-textarea:focus,
.v16-settings .v16-select:focus,
.v16-settings .v16-handle-row:focus-within{
  box-shadow:0 0 0 1px rgba(255,255,255,0.12),
             0 0 24px rgba(255,255,255,0.05);
  outline:none
}

/* ── Skin grid — cinematic theme picker ──────────────────────── */
.v16-settings .v16-skin-grid{
  gap:12px
}

.v16-settings .v16-skin-tile{
  /* Tighter rounded corners, more breath, smoother transition */
  border-radius:12px;
  transition:transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
             border-color 240ms ease,
             box-shadow 320ms ease,
             filter 240ms ease;
  /* Subtle inset shine on hover/active */
  box-shadow:inset 0 0 0 0 transparent
}

.v16-settings .v16-skin-tile:not(.locked):hover{
  transform:translateY(-3px) scale(1.025);
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 12px 32px rgba(0,0,0,0.4),
             inset 0 1px 0 rgba(255,255,255,0.08)
}

.v16-settings .v16-skin-tile.active{
  transform:translateY(-2px);
  border-color:#FFFFFF;
  box-shadow:0 0 0 2px rgba(255,255,255,0.35),
             0 16px 40px rgba(255,255,255,0.08),
             inset 0 1px 0 rgba(255,255,255,0.12)
}

.v16-settings .v16-skin-tile.locked{
  filter:saturate(0.6) brightness(0.85)
}
.v16-settings .v16-skin-tile.locked:hover{
  filter:saturate(0.75) brightness(0.92);
  transform:translateY(-1px)
}

/* Active "Currently active" checkmark chip — pulse-in entrance */
.v16-settings .v16-skin-tile.active::before{
  content:'✓';
  position:absolute;
  top:6px;
  right:6px;
  z-index:3;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#000;
  background:#FFFFFF;
  border-radius:50%;
  animation:v16CheckIn 320ms cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
  box-shadow:0 4px 12px rgba(0,0,0,0.4)
}
@keyframes v16CheckIn{
  from { opacity:0; transform:scale(0) rotate(-90deg) }
  to   { opacity:1; transform:scale(1) rotate(0) }
}

/* ── Toggle / row hovers ─────────────────────────────────────── */
.v16-settings .v16-row{
  transition:background var(--duration) ease, padding-left 240ms ease
}
.v16-settings .v16-row:hover{
  background:rgba(255,255,255,0.015)
}

/* ── Save / primary buttons — shimmer sweep (brand consistency) ── */
.v16-settings .v16-btn-primary,
.v16-settings .v16-btn-ghost.v16-btn-save{
  position:relative;
  overflow:hidden;
  transition:transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 240ms ease,
             background 240ms ease
}
.v16-settings .v16-btn-primary::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-100%;
  width:60%;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
  transform:skewX(-20deg);
  transition:left 600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events:none
}
.v16-settings .v16-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(255,255,255,0.18)
}
.v16-settings .v16-btn-primary:hover::before{
  left:150%
}

/* ── Connected accounts rows — micro-interaction ─────────────── */
.v16-settings .v16-conn-row{
  transition:background var(--duration) ease,
             border-color var(--duration) ease,
             transform 200ms cubic-bezier(0.22, 1, 0.36, 1)
}
.v16-settings .v16-conn-row:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
  transform:translateY(-1px)
}

/* ── Avatar circle — hover scale + ring ──────────────────────── */
.v16-settings .v16-avatar-circle{
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 280ms ease
}
.v16-settings .v16-avatar-circle:hover{
  transform:scale(1.04);
  box-shadow:0 0 0 4px rgba(255,255,255,0.06),
             0 12px 32px rgba(0,0,0,0.4)
}

/* ── Status dots — match the v22 community page online breath ─── */
.v16-settings .v16-status-dot.online{
  animation:v16OnlineBreath 2.8s ease-in-out infinite
}
@keyframes v16OnlineBreath{
  0%,100% { box-shadow:0 0 6px rgba(57,255,20,0.6) }
  50%     { box-shadow:0 0 14px rgba(57,255,20,0.9) }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .v16-settings .v16-main,
  .v16-settings .v16-card,
  .v16-settings .v16-skin-tile,
  .v16-settings .v16-status-dot.online{
    animation:none;
    transition:none
  }
}

/* ════════════════════════════════════════════════════════════════
   v25 audit hotfixes (extend v23 — same surface)
   • Theme grid: clearance for bottom nav so last row isn't hidden
   • Privacy section: tighter visual hierarchy on the two dropdowns
   • Display name: red-border + visible error when empty/too short
   ════════════════════════════════════════════════════════════════ */

/* Bottom-nav clearance for the whole settings main area */
.v16-settings .v16-main{
  padding-bottom:140px
}

/* Theme grid — slightly larger min-width so it doesn't squish to 3 cols
   on tablet widths, plus consistent gap */
.v16-settings .v16-skin-grid{
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px
}

/* Display-name input — red treatment when empty/invalid */
.v16-settings .v16-input-required:invalid:not(:placeholder-shown){
  border-color:rgba(255,91,103,0.55);
  box-shadow:0 0 0 1px rgba(255,91,103,0.15)
}
.v16-settings .v16-field-err{
  display:none;
  margin-top:6px;
  font-size:12px;
  color:#ff5b67;
  line-height:1.4
}
.v16-settings .v16-input-required:invalid:not(:placeholder-shown) + .v16-field-err{
  display:block
}

/* ── Privacy tab — better visual rhythm on the dropdown stack ─── */
.v16-settings .v16-card .v16-field + .v16-field{
  margin-top:18px
}
.v16-settings .v16-card .v16-field .v16-label{
  margin-bottom:8px;
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.55)
}

/* Custom select chevron so it doesn't read as a native browser <select> */
.v16-settings .v16-select{
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:12px 40px 12px 14px;
  background-color:rgba(255,255,255,0.02);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  cursor:pointer;
  transition:background-color 200ms ease,
             border-color 200ms ease,
             box-shadow 240ms ease
}
.v16-settings .v16-select:hover{
  background-color:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.12)
}