/* Small, local acknowledgements. Photos and full content never receive effects. */
.polish-button {
  position: relative;
  isolation: isolate;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
    box-shadow .24s ease, transform .24s var(--ease, ease), scale .16s var(--ease, ease);
}
.polish-button.polish-pressed { scale: .985; }
.polish-button:focus-visible {
  outline: 2px solid #729d83;
  outline-offset: 4px;
}
.polish-feedback, .polish-hover-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}
.polish-ink {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: radial-gradient(circle, #96b7a147 0, #bfdfc62b 36%, transparent 72%);
  animation: polish-tap .46s cubic-bezier(.16, 1, .3, 1) both;
}
.polish-button.primary .polish-ink {
  background: radial-gradient(circle, #ffffff70 0, #d9eee037 34%, transparent 72%);
}
.club-welcome .polish-button.primary .polish-ink {
  background: radial-gradient(circle, #96b7a147 0, #bfdfc62b 36%, transparent 72%);
}
.polish-hover-light {
  opacity: 0;
  background: radial-gradient(85px circle at var(--polish-light-x, 50%) var(--polish-light-y, 50%),
    #ffffff35, transparent 72%);
  transition: opacity .2s ease;
}
@keyframes polish-tap {
  from { opacity: .85; transform: scale(.24); }
  to { opacity: 0; transform: scale(2.2); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .polish-button.polish-hovered > .polish-hover-light { opacity: 1; }
}

/* Selected state still comes from the application; only the background travels. */
.polish-tabs { position: relative; isolation: isolate; }
.polish-tabs > button { position: relative; z-index: 1; }
.polish-tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 3px;
  pointer-events: none;
  background: #fff;
  box-shadow: 0 2px 7px #324b3709;
  visibility: hidden;
}
.polish-tabs-ready > .polish-tab-indicator {
  visibility: visible;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), width .3s cubic-bezier(.16, 1, .3, 1);
}
.segmented.polish-tabs-ready > button.active {
  background: transparent;
  box-shadow: none;
}
.community-tabs.polish-tabs-ready > .polish-tab-indicator {
  border-radius: 4px;
  background: var(--green, #426856);
  box-shadow: inset 0 1px #ffffff24;
}
#app-shell .community-tabs.polish-tabs-ready > button.active {
  background: transparent;
  box-shadow: none;
}
.period-tabs.polish-tabs-ready > .polish-tab-indicator {
  background: transparent;
  border-radius: 0;
  box-shadow: inset 0 -2px var(--green, #426856);
}
.period-tabs.polish-tabs-ready > button.active { border-bottom-color: transparent; }

/* Native focus is the source of truth, including fields created inside dialogs. */
.form-field { transition: color .18s ease; }
.form-field:focus-within { color: var(--green, #426856); }
.form-field :is(input, textarea, select) {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-field :is(input, textarea, select):focus,
#sheet .form-field :is(input, textarea, select):focus {
  border-color: #789b84;
  box-shadow: 0 0 0 3px #8bae941a, inset 0 1px #fff;
  background-color: #fff;
}
.photo-input:focus-within,
.visibility-options label:has(input:focus-visible) {
  outline: 2px solid #729d83;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .polish-feedback, .polish-hover-light { display: none; }
  .polish-button, .polish-tab-indicator, .form-field,
  .form-field :is(input, textarea, select) { transition: none !important; }
  #app-shell .polish-button:active, #sheet .polish-button:active,
  .polish-button.polish-pressed { transform: none; scale: none; }
  .polish-button.polish-pressed { box-shadow: inset 0 0 0 1px #a4bdac; }
}