/* Shared iOS-style SVG icon styles (REQ-383).
   Loaded by every page that uses _icons.html macros. The icons
   inherit `currentColor` from their parent button so they pick up
   v1.0 (--gold #c9a84c) and v2.0 (--gold #c9a86d) palettes equally. */

.ios-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  /* Optical centering on top of text labels — drops the icon ~1px so
     the visual baseline lines up with mono/sans button copy. */
  transform: translateY(-1px);
}

/* Buttons that hold a single icon should sit on a touch-friendly
   44×44 target (REQ-265-style, audit P1-A). */
.ios-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: background 180ms cubic-bezier(.2,.7,.2,1),
              border-color 180ms cubic-bezier(.2,.7,.2,1),
              color 180ms cubic-bezier(.2,.7,.2,1);
}
.ios-icon-btn:hover,
.ios-icon-btn:focus-visible {
  background: rgba(201, 168, 109, 0.10);
  border-color: rgba(201, 168, 109, 0.28);
}
.ios-icon-btn:focus-visible {
  outline: 2px solid rgba(201, 168, 109, 0.55);
  outline-offset: 2px;
}
.ios-icon-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* Spinner — 1.1s linear rotation, perceptually identical to iOS. */
.ios-icon--spinner {
  animation: iosSpin 1.1s linear infinite;
}
@keyframes iosSpin {
  to { transform: rotate(360deg) translateY(-1px); }
}

/* When swapping icons inside a single button (e.g. PDF download → spinner →
   back to download), pre-cache color transitions so the swap doesn't flash. */
.ios-icon--swap-fade {
  transition: opacity 180ms cubic-bezier(.2,.7,.2,1);
}
.ios-icon--swap-fade.is-hidden {
  opacity: 0;
}