/* ==========================================================================
   Inline Edit — Editable section wrappers + ghost pencil
   ========================================================================== */

.editable-section {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.editable-section__pencil {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
  transition: opacity var(--duration-fast) var(--ease-out);
  z-index: 1;
  padding: 0;
}

.editable-section__pencil:hover {
  opacity: 0.5;
}

.editable-section__pencil:active {
  opacity: 0.7;
}

.editable-section__pencil svg {
  width: 14px;
  height: 14px;
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editable-section.section--pressing {
  background: rgba(232, 150, 12, 0.06);
  transition: background var(--duration-fast) var(--ease-out);
}

.editable-section--top .editable-section__pencil {
  top: var(--space-4);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .editable-section.section--pressing {
    transition: none;
  }
}