/* Original editor interaction layer: makes editable content and destructive actions explicit. */
:root { --glass: rgba(15, 26, 29, .72); --glass-line: rgba(221, 242, 232, .22); }

.section-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.025), transparent 28%, transparent 74%, rgba(200,255,61,.025));
}

.inline-input, .section-title-input, .experience-card input, .experience-card textarea,
.project-card input, .project-card textarea, .skill-card input, .skill-card textarea,
.contact-details input, .contact-title-input, .contact-copy-input, .availability-card input,
.availability-card textarea, .tag-chip {
  transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.inline-input:hover, .section-title-input:hover, .experience-card input:hover,
.experience-card textarea:hover, .project-card input:hover, .project-card textarea:hover,
.skill-card input:hover, .skill-card textarea:hover, .contact-details input:hover,
.contact-title-input:hover, .contact-copy-input:hover, .availability-card input:hover,
.availability-card textarea:hover {
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 -1px 0 rgba(200,255,61,.42);
}

.tag-chip:hover { box-shadow: 0 0 0 1px rgba(200,255,61,.55), 0 10px 22px rgba(0,0,0,.2); }
.tag-chip:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 24px rgba(200,255,61,.18); }

.experience-card, .project-card, .skill-card { transition: transform .22s ease, background-color .22s ease, border-color .22s ease; }
.experience-card:hover { background: rgba(255,255,255,.018); }
.project-card:hover, .skill-card:hover { transform: translateY(-3px); border-color: var(--glass-line); }
.project-card:hover { box-shadow: 0 18px 38px rgba(0,0,0,.22); }

.icon-delete, .remove-media, .tag-chip button {
  opacity: 0;
  pointer-events: none;
  transform: scale(.84);
  transition: opacity .16s ease, transform .16s ease, background-color .16s ease;
}
.experience-card:hover .icon-delete, .experience-card:focus-within .icon-delete,
.project-card:hover > .icon-delete, .project-card:focus-within > .icon-delete,
.skill-card:hover .icon-delete, .skill-card:focus-within .icon-delete,
.showcase-tile:hover .remove-media, .project-media:hover .remove-media,
.avatar-shell:hover .remove-media, .qr-shell:hover .remove-media,
.tag-chip:hover button, .tag-chip:focus-within button {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.icon-delete:hover, .remove-media:hover, .tag-chip button:hover { background: var(--danger); color: #fff; }

.toolbar, .availability-card {
  background: linear-gradient(135deg, rgba(25,40,43,.86), rgba(8,13,15,.76));
  border-color: var(--glass-line);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.toolbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11);
}
.toolbar-button { position: relative; }
.toolbar-button:focus-visible, .primary-action:focus-visible, .secondary-action:focus-visible,
.add-text-button:focus-visible, .icon-delete:focus-visible, .remove-media:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.image-upload { transition: transform .2s ease, box-shadow .2s ease; }
.image-upload:hover { transform: scale(1.1) rotate(8deg); box-shadow: 0 0 0 6px rgba(200,255,61,.15); }
.primary-action { transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.primary-action:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(200,255,61,.17); }
.side-nav a { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.side-nav a:hover { transform: translateX(3px); }
.is-scrolled .topbar .side-nav { background: rgba(6, 11, 13, .9); box-shadow: 0 10px 28px rgba(0,0,0,.22); }

@media (max-width: 700px) {
  .icon-delete, .remove-media, .tag-chip button { opacity: .8; pointer-events: auto; transform: none; }
  .toolbar { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}